js实现回到顶部效果。点击回到顶部，滚轮向下滚动中断回到顶部，停在当前位置

最新推荐文章于 2023-02-06 19:28:23 发布

aoyia

最新推荐文章于 2023-02-06 19:28:23 发布

阅读量562

点赞数 2

分类专栏： javascript 文章标签： javascript js dom

本文链接：https://blog.csdn.net/weixin_43601701/article/details/118249129

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

子曰：温故而知新，可以为师矣

<style>
      .topBtn {
        width: 50px;
        height: 90px;
        position: fixed;
        bottom: 50px;
        right: 50px;
        background-color: palegreen;
      }
      .contain {
        width: 400px;
        height: 800px;
        background-color: orange;
        border: 1px solid #ccc;
      }
    </style>
    <div class="topBtn"></div>
    <div class="contain"></div>
    <div class="contain"></div>
    <div class="contain"></div>
    <div class="contain"></div>
    <div class="contain"></div>
    <div class="contain"></div>

<script>
      const topBtn = document.querySelector('.topBtn');
      topBtn.onclick = function () {
        if (getScroll()) {
          setScroll();
        }
      };
      // 获取当前位置到顶部的距离
      function getScroll() {
        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      }

      // 监测鼠标滚轮状态，tag为true时为滚轮向下滚动，中断回到顶部
      let tag = false;
      document.addEventListener('wheel', moveWheel, false);
      function moveWheel(e) {
        let timerWheel = null;
        e = window.event;
        if (e.wheelDelta < 0) {
          console.log('鼠标滚轮向下滚动');
          tag = true;
        }
        // 滚轮停止不动200ms后tag为false，变回默认状态
        clearTimeout(timerWheel);
        timerWheel = setTimeout(() => {
          tag = false;
        }, 200);
      }

      // 回到顶部
      function setScroll() {
        let timer = setInterval(() => {
          let base = getScroll();
          console.log(tag);
          if (base <= 1 || tag) {
            // 当滚轮往下滚动时tag为true，停止到达顶部
            clearInterval(timer);
          }
          document.documentElement.scrollTop = base - Math.pow(base, 3 / 5); // 速度可自己调整
        }, 20);
      }
    </script>