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

讷言丶

已于 2023-10-27 09:46:59 修改

阅读量2.7k

点赞数 1

文章标签： css html css3

于 2023-04-10 10:09:55 首次发布

本文链接：https://blog.csdn.net/weixin_51033461/article/details/130053600

版权

实现上下滑动的主要属性：scroll-behavior: smooth;

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

代码直接复制测试

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      scroll-behavior: smooth;
    }

    #section1 {
      height: 600px;
      background-color: black;
    }

    #section2 {
      height: 600px;
      background-color: skyblue;
    }
  </style>
</head>

<body>

  <h1>上下平滑的滚动</h1>

  <div class="main" id="section1">
    <h2>第一章</h2>
    <p>请点击链接来查看平滑的滚动效果。</p>
    <a href="#section2">点击我会平滑滚动到下面的第二章</a>
    <p class="note"><span>注释：</span>删除 scroll-behavior 属性可清除平滑滚动。</p>
  </div>

  <div class="main" id="section2">
    <h2>第二章</h2>
    <a href="#section1">点击我可平滑滚动到上面的第一章</a>
  </div>

  <p><b>注释：</b>Internet Explorer 不支持 scroll-behavior 属性。</p>

</body>

</html>