vue 实现返回顶部

实现功能：当屏幕大于多少，展示出返回头部的按钮，当屏幕小于多少就隐藏返回头部的按钮；

展示返回头部

隐藏返回头部

代码展示

//第一步
mounted() {
      //获取当前的页面滚动事件，然后执行 this.showheader事件
      window.addEventListener('scroll', this.showheader);
    },
    destroyed() {
      window.removeEventListener('scroll', this.showheader);
    },
//第二步
showheader: function() {
        //当前屏幕等于多少执行的事件
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        this.scrollTop = scrollTop
        console.log(scrollTop)
        if (scrollTop > 541) {
          //当屏幕大于541的时候，就显示，小于则不显示
          this.show = true;
        } else {
          this.show = false;
        }
      }
//第三步
backTop: function() {
        //返回头部的动画
        const that = this
        let timer = setInterval(() => {
          let ispeed = Math.floor(-that.scrollTop / 7)
          document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
          if (that.scrollTop === 0) {
            clearInterval(timer)
          }
        }, 10)