vue回到顶部组件

html

js

1. 监听滚动事件
   利用VUE写一个在控制台打印当前的scrollTop。首先，在 mounted 钩子中给window添加一个滚动滚动监听事件：

  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },

2. 监听回到顶部按钮距浏览器顶部的距离，滚动的距离如果大于浏览器高度时，设置 toTop 为true,否则就是false;

    scrollToTop() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let browserHeight = window.outerHeight;
      if (scrollTop > browserHeight) {
        this.backToTop = true
      } else {
        this.backToTop = false
      }
    }
  }

3. 点击回到顶部按钮，让距离逐渐减少，形成上划的效果

    //回到顶部
    backTop() {
      let back = setInterval(() => {
        if (document.body.scrollTop || document.documentElement.scrollTop) {
          document.body.scrollTop -= 100;
          document.documentElement.scrollTop -= 100;
        } else {
          clearInterval(back);
        }
      });
    },

4. 离开该页面需要移除这个监听的事件

  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  }

样式