CSS scroll-behavior 属性

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


实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. html {
  6. scroll-behavior: smooth;
  7. }
  8. #section1 {
  9. height: 600px;
  10. background-color: pink;
  11. }
  12. #section2 {
  13. height: 600px;
  14. background-color: yellow;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h2>平滑的滚动</h2>
  20. <div class="main" id="section1">
  21. <h2>第一章</h2>
  22. <p>请点击链接来查看平滑的滚动效果。</p>
  23. <a href="#section2">点击我会平滑滚动到下面的第二章</a>
  24. <p>注释:删除 scroll-behavior 属性可清楚平滑滚动。</p>
  25. </div>
  26. <div class="main" id="section2">
  27. <h2>第二章</h2>
  28. <a href="#section1">点击我可平滑滚动到上面的第一章</a>
  29. </div>
  30. <p><b>注释:</b>Internet Explorer 不支持 scroll-behavior 属性。</p>
  31. </body>
  32. </html>

定义和用法

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

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

浏览器支持

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

属性
scroll-behavior61.079.036.014.048.0

CSS 语法

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

分类导航