CSS scroll-behavior属性： 滚动框指定滚动行为

div+css

概念

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

语法

/* Keyword values */
scroll-behavior: auto; // 滚动条立即滚动
scroll-behavior: smooth; // 窗口平稳滚动

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

浏览器兼容性

[runcode]
< !DOCTYPE html>



锚点平滑跳转


box1
box2
box3



[/runcode]
详见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior