vue+element-ui 回到顶部组件

橙子0012

背景

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

开发HTML部分

code：

1. <template>
   
2.   <transition name="el-fade-in">
   
3.     <div class="page-up" @click="scrollToTop" v-show="toTopShow">
   
4.       <i class="el-icon-caret-top"></i>
   
5.     </div>
   
6.   </transition>
   
7. </template>
   

复制代码

这里使用了一个进入动画，看起来自然一点。

CSS部分

code：

1. <style scoped lang="scss">
   
2.   .page-up{
   
3.     background-color: #409eff;
   
4.     position: fixed;
   
5.     right: 50px;
   
6.     bottom: 30px;
   
7.     width: 40px;
   
8.     height: 40px;
   
9.     border-radius: 20px;
   
10.     cursor: pointer;
    
11.     transition: .3s;
    
12.     box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
    
13.     opacity: .5;
    
14.     z-index: 100;
    
15.     .el-icon-caret-top{
    
16.       color: #fff;
    
17.       display: block;
    
18.       line-height: 40px;
    
19.       text-align: center;
    
20.       font-size: 18px;
    
21.     }
    
22.     p{
    
23.       display: none;
    
24.       text-align: center;
    
25.       color: #fff;
    
26.     }
    
27.     &:hover{
    
28.       opacity: 1;
    
29.     }
    
30.   }
    
31. </style>
    

复制代码

这也没啥说的，自己觉得好看就行。

JavaScript部分

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

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

屏幕滚动事件

code：

1. mounted() {
   
2.     this.$nextTick(function () {
   
3.         window.addEventListener('scroll', this.handleScroll,true);
   
4.     });
   
5. },
   
6. destroyed() {
   
7.     window.addEventListener('scroll', this.handleScroll,true);
   
8. }
   

复制代码

这里有两个注意事项：

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

code：

1. handleScroll() {
   
2.     let dom =document.getElementsByClassName('content-container')[0];
   
3.     this.scrollTop = dom.scrollTop;
   
4.     if (this.scrollTop > 300) {
   
5.         this.toTopShow = true;
   
6.     }else {
   
7.         this.toTopShow = false;
   
8.     }
   
9. },
   

复制代码

这里需要注意的地方是：

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

回到顶部按钮的点击事件

code：

1. scrollToTop() {
   
2.       let timer = null;
   
3.       let _this = this;
   
4.       cancelAnimationFrame(timer);
   
5.       timer = requestAnimationFrame(function fn() {
   
6.         if (_this.scrollTop > 5000) {
   
7.           _this.scrollTop -= 1000;
   
8.           document.getElementsByClassName("content-container")[0].scrollTop =
   
9.             _this.scrollTop;
   
10.           timer = requestAnimationFrame(fn);
    
11.         } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
    
12.           _this.scrollTop -= 500;
    
13.           document.getElementsByClassName("content-container")[0].scrollTop =
    
14.             _this.scrollTop;
    
15.           timer = requestAnimationFrame(fn);
    
16.         } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
    
17.           _this.scrollTop -= 100;
    
18.           document.getElementsByClassName("content-container")[0].scrollTop =
    
19.             _this.scrollTop;
    
20.           timer = requestAnimationFrame(fn);
    
21.         } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
    
22.           _this.scrollTop -= 10;
    
23.           document.getElementsByClassName("content-container")[0].scrollTop =
    
24.             _this.scrollTop;
    
25.           timer = requestAnimationFrame(fn);
    
26.         } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
    
27.           _this.scrollTop -= 5;
    
28.           document.getElementsByClassName("content-container")[0].scrollTop =
    
29.             _this.scrollTop;
    
30.           timer = requestAnimationFrame(fn);
    
31.         } else {
    
32.           cancelAnimationFrame(timer);
    
33.           _this.toTopShow = false;
    
34.         }
    
35.       });
    
36.     }
    

复制代码

这里需要主要几点：

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

kikizq

好用，谢谢啦，content-container这个用参数传进来会更方便