vue实现滚动条返回顶部功能

 

methods:{
    //返回顶部
      backTop () {
        let timer = setInterval(function () {
          var top = document.body.scrollTop || document.documentElement.scrollTop;
          var speed = top / 4;
          if (document.body.scrollTop!=0) {
            document.body.scrollTop -= speed;
          }else {
            document.documentElement.scrollTop -= speed;
          }
          if (top == 0) {
            clearInterval(timer);
          }
        },30);
      },
      // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
      scrollToTop () {
        const that = this
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        that.scrollTop = scrollTop;
        //判断滚动超出一定距离后在让返回顶部按钮出现
        // if (that.scrollTop > 300) {
        //   that.backFlag = true
        // }else {
        //   that.backFlag = false
        // }
      }
},
mounted () {
      let that = this;
      window.addEventListener('scroll', that.scrollToTop);
},
destroyed (){
      let that = this;
      window.removeEventListener('scroll', that.scrollToTop);
},

资源参考链接：https://www.cnblogs.com/li-you/p/7275239.html