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.it610.com/article/1283171412231602176.htm

声明:张先生的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - vue实现滚动条返回顶部功能


选择自己所爱的,然后爱自己所选择的!