CSS scroll-behavior 属性

定义和用法

scroll-behavior 属性规定当用户单击可滚动框中的链接时,是否平滑地(具动画效果)滚动位置,而不是直线跳转。

实例

为文档添加平滑滚动效果:

html {
  scroll-behavior: smooth;
}

亲自试一试

CSS 语法

scroll-behavior: auto|smooth|initial|inherit;

属性值

描述
auto 默认值。允许在滚动框内的元素间直接跳转的“滚动效果”。
smooth 允许在滚动框内的元素间平滑的“滚动效果”。
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: auto
继承:
动画制作: 不支持。请参阅:动画相关属性
版本: CSSOM View Module(工作草案)
JavaScript 语法: object.style.scrollBehavior="smooth"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0