vue中使用element UI中的组件 回到顶部

开发框架是vue+webpack+element-ui，需要一个回到顶部的通用组件。

HTML:这里使用了一个进入动画

CSS部分:

JavaScript部分

这里是重点了，主要是监听两个事件：

屏幕滚动事件
回到顶部按钮的点击事件

 

屏幕滚动事件
code：

mounted() {
    this.$nextTick(function () {
        window.addEventListener('scroll', this.handleScroll,true);
    });
},
destroyed() {
    window.addEventListener('scroll', this.handleScroll,true);
}

这里有两个注意事项：

注意是将事件绑定在window上，监听整个文档的滚动，也可以绑在document或者document.body上
需要在元素加载之后再监听滚动事件
需要将addEventListener的第三个参数设置为true，即取消冒泡，要不然会绑定不成功

code：

handleScroll() {
    let dom =document.getElementsByClassName('content-container')[0];
    this.scrollTop = dom.scrollTop;
    if (this.scrollTop > 300) {
        this.toTopShow = true;
    }else {
        this.toTopShow = false;
    }
}

这里需要注意的地方是：

一开始不必将回到顶部按钮显示出来，等用户将页面往下滑动一段距离之后再显示回到顶部按钮，这样更加符合用户的操作习惯

回到顶部按钮的点击事件
code：

scrollToTop() {
      let timer = null;
      let _this = this;
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn() {
        if (_this.scrollTop > 5000) {
          _this.scrollTop -= 1000;
          document.getElementsByClassName("content-container")[0].scrollTop =
            _this.scrollTop;
          timer = requestAnimationFrame(fn);
        } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
          _this.scrollTop -= 500;
          document.getElementsByClassName("content-container")[0].scrollTop =
            _this.scrollTop;
          timer = requestAnimationFrame(fn);
        } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
          _this.scrollTop -= 100;
          document.getElementsByClassName("content-container")[0].scrollTop =
            _this.scrollTop;
          timer = requestAnimationFrame(fn);
        } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
          _this.scrollTop -= 10;
          document.getElementsByClassName("content-container")[0].scrollTop =
            _this.scrollTop;
          timer = requestAnimationFrame(fn);
        } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
          _this.scrollTop -= 5;
          document.getElementsByClassName("content-container")[0].scrollTop =
            _this.scrollTop;
          timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(timer);
          _this.toTopShow = false;
        }
      });
    }

 
这里需要主要几点：

使用requestAnimationFrame，优点就不必多说了
正常情况下回到顶部的速度是由快变慢的，这样看起来更加符合用户的使用习惯，而且效果也更加好看
将距离顶部的距离划分为五个部分，每个部分的速度都不一样

调用
全部页面调用
操作App.vue
添加JavaScript代码

页面中引用

单个页面调用
操作需要调用该组件的页面文件即可，方法同上。