一行CSS实现页面上下滑动【scroll-behavior: smooth；】

Myth丶恋晨 2023-09-25 22:57 85阅读 0赞
实现上下滑动的主要属性：scroll-behavior: smooth;

一般添加在html或者body标签上

代码直接复制测试

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <style>
  6.     html {
  8.       scroll-behavior: smooth;
  9.     }
  11.     #section1 {
  13.       height: 600px;
  14.       background-color: black;
  15.     }
  17.     #section2 {
  19.       height: 600px;
  20.       background-color: skyblue;
  21.     }
  22.   </style>
  23. </head>
  25. <body>
  27.   <h1>上下平滑的滚动</h1>
  29.   <div class="main" id="section1">
  30.     <h2>第一章</h2>
  31.     <p>请点击链接来查看平滑的滚动效果。</p>
  32.     <a href="#section2">点击我会平滑滚动到下面的第二章</a>
  33.     <p class="note"><span>注释：</span>删除 scroll-behavior 属性可清除平滑滚动。</p>
  34.   </div>
  36.   <div class="main" id="section2">
  37.     <h2>第二章</h2>
  38.     <a href="#section1">点击我可平滑滚动到上面的第一章</a>
  39.   </div>
  41.   <p><b>注释：</b>Internet Explorer 不支持 scroll-behavior 属性。</p>
  43. </body>
  45. </html>```

发表评论

表情：
评论列表 （有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读