css平滑滚动 scroll-behavior: smooth；

最新推荐文章于 2023-04-10 10:09:55 发布

AdleyTales

最新推荐文章于 2023-04-10 10:09:55 发布

阅读量2.8k

点赞数 1

分类专栏： css

本文为博主原创文章，未经博主允许不得转载。 Email: [email protected]

本文链接：https://blog.csdn.net/adley_app/article/details/112529263

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>锚点平滑跳转</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    nav {
      width: 50%;
      height: 50px;
      text-align: center;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      background: green;
    }

    nav a {
      display: inline-block;
      line-height: 50px;
      color: #FFF;
      text-decoration: none;
      padding: 0 30px;
    }


    .box {
      width: 100%;
      text-align: center;
      font-size: 30px;
      color: #FFF;
    }

    #box1 {
      background: #d00;
    }

    #box2 {
      background: #42a4ff;
    }

    #box3 {
      background: #008080;
    }

    #to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      background: #ccc;
      color: #666;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <nav>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <a href="#box3">box3</a>
  </nav>

  <div id="box1" class=" box">box1</div>
  <div id="box2" class=" box">box2</div>
  <div id="box3" class=" box">box3</div>

  <div id="to-top">回到顶部</div>

  <script>
    onload = function () {
      const _Height = document.documentElement.clientHeight;
      const Box = document.getElementsByClassName('box');

      for (var i = 0; i < Box.length; i++) {
        Box[i].style.height = _Height + 'px'
        Box[i].style.lineHeight = _Height + 'px'
      }

      document.querySelector('#to-top').onclick = function (el) {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
    }
  </script>
</body>

</html>

主要

html {
 scroll-behavior: smooth;
}

这样，在回到顶部的时候，会有动画不会立即过去，或有渐变动画
锚点，切换屏幕的时候也会有动画

 document.querySelector('#to-top').onclick = function (el) {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }

AdleyTales

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css平滑滚动 scroll-behavior: smooth；

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>锚点平滑跳转</title> <style> * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } nav {
复制链接

扫一扫