博客

注意点： 所包含的div中避免设置overflow,否则监听不到鼠标滚动

1、滚动的内容和返回按钮放在同级下，

<div class="back-top">
  <div class="button" @click="backTop" v-if="showBtn">
    <i class="el-icon-top back-top1"></i>
    <span class="back-top2">
      返回顶部
    </span>
   </div>
   <div v-for="s in 100" :key="s" class="background-color">{{ s }}</div>
 </div>

 data() {
    return {
      showBtn: false // 回到顶部，默认是false，就是隐藏起来
    };
 },

2、监听鼠标滚动，当大于设置的值时，就操作

mounted() {
    window.addEventListener("scroll", this.showbtn, true); // 监听鼠标滚动，
},

3、点击返回按钮

// 回到顶部
    showbtn() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.scrollTop = scrollTop;
      console.log(scrollTop);
      if (scrollTop > 500) {
        this.showBtn = true;
      } else {
        this.showBtn = false;
      }
    },

    /*回到顶部实现过程注解：
        1.获取当前页面距离顶部的距离
        2.计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是一个减法
        3.用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
        4.最后在移动到顶部的时候，清除定时器
        */

    backTop() {
      var timer = setInterval(function() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },