原生js scrollTop offsetTop （回到顶部及元素的锚点）

qweqwewqeee

已于 2022-08-10 17:35:16 修改

阅读量486

点赞数 1

于 2022-08-10 17:28:22 首次发布

本文链接：https://blog.csdn.net/qweqwewqeee/article/details/126270829

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style>
       * {
           padding: 0;
           margin: 0;
       }

       #div {
           width: 100%;
           height: auto;
           background-color: teal;
           text-align: center;
           color: #fff;
       }

       #div2 {
           width: 100%;
           height: auto;
           background-color: pink;
           margin-top: 2000px;
           margin-bottom: 1000px;
           text-align: center;

}

       #top {
           width: 100px;
           height: 100px;
           background: steelblue;
           text-align: center;
           line-height: 100px;
           display: none;
           position: fixed;
           right: 0;
           top: 700px;
       }
   </style>
   <body>
       <div id="div">teal (点击回到pink)</div>
       <div id="div2">
           pink
       </div>
       <div id="top">
           回到顶部
       </div>
       <script>
           window.onload = function() {
               var divOffsetTop = document.getElementById('div2').offsetTop;
               var top = document.getElementById('top');

window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

                   if (scrollTop >= divOffsetTop) {
                       top.style.display = 'block';
                   } else {
                       top.style.display = 'none';
                   }

                   document.getElementById('top').onclick = function() {

let timer = setInterval(() => {

// 获取滚动条高度
let wTop = document.documentElement.scrollTop || document.body.scrollTop;

                           // 上升速度
                           let speed = Math.floor(-wTop / 25)
                           console.log(speed);
                           // 上升过程中逐步获取滚动条高度
                           document.documentElement.scrollTop = document.body.scrollTop = wTop + speed;

                           // 到顶部时.停止
                           if (wTop == 0) {
                               clearInterval(timer)
                           }
                       }, 10)

}

document.getElementById('div').onclick = function() {

                   let wTop = this.offsetTop;
                   let num = 20;
                   let timer = setInterval(() => {

// 下降速度 num值越大则速度越快
wTop += num;

                       // 下降过程中逐步获取滚动条高度
                       document.documentElement.scrollTop = document.body.scrollTop = wTop;
                       // return false;
                       // 到达位置时.停止
                       if (wTop > divOffsetTop) {
                           document.documentElement.scrollTop = divOffsetTop;
                           console.log(document.documentElement.scrollTop);

                           console.log(divOffsetTop);
                           clearInterval(timer)
                       }
                   }, 10)
               }
           }
       </script>

</body>
</html>