Vue+elementUI 创建“回到顶部”组件

1、创建“回到顶部”组件

  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>
  8
  9 <script>
 10     export default {
 11         name: "app-to-top",
 12         data(){
 13             return{
 14                 toTopShow:false,
 15             }
 16         },
 17         methods:{
 18             handleScroll() {
 19     　　　　　　　　/* 获取回到顶部的位置元素 .content-container-top */
 20                 let dom =document.getElementsByClassName('content-container-top')[0];
 21                 this.scrollTop = dom.scrollTop;
 22                 if (this.scrollTop > 300) {
 23                     this.toTopShow = true;
 24                 }else {
 25                     this.toTopShow = false;
 26                 }
 27             },
 28             scrollToTop() {
 29                 let timer = null;
 30                 let _this = this;
 31                 cancelAnimationFrame(timer);
 32                 timer = requestAnimationFrame(function fn() {
 33                     if (_this.scrollTop > 5000) {
 34                         _this.scrollTop -= 1000;
 35                         document.getElementsByClassName("content-container")[0].scrollTop =
 36                             _this.scrollTop;
 37                         timer = requestAnimationFrame(fn);
 38                     } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
 39                         _this.scrollTop -= 500;
 40                         document.getElementsByClassName("content-container")[0].scrollTop =
 41                             _this.scrollTop;
 42                         timer = requestAnimationFrame(fn);
 43                     } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
 44                         _this.scrollTop -= 100;
 45                         document.getElementsByClassName("content-container")[0].scrollTop =
 46                             _this.scrollTop;
 47                         timer = requestAnimationFrame(fn);
 48                     } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
 49                         _this.scrollTop -= 10;
 50                         document.getElementsByClassName("content-container")[0].scrollTop =
 51                             _this.scrollTop;
 52                         timer = requestAnimationFrame(fn);
 53                     } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
 54                         _this.scrollTop -= 5;
 55                         document.getElementsByClassName("content-container")[0].scrollTop =
 56                             _this.scrollTop;
 57                         timer = requestAnimationFrame(fn);
 58                     } else {
 59                         cancelAnimationFrame(timer);
 60                         _this.toTopShow = false;
 61                     }
 62                 });
 63             }
 64         },
 65         mounted() {
 66             this.$nextTick(function () {
 67                 window.addEventListener('scroll', this.handleScroll,true);// 取消事件冒泡，防止绑定失败
 68             });
 69         },
 70         destroyed() {
 71             window.removeEventListener('scroll', this.handleScroll,true);// 取消事件冒泡
 72         }
 73     }
 74 </script>
 75
 76 <style scoped>
 77     .page-up{
 78         background-color: #409eff;
 79         position: fixed;
 80         right: 50px;
 81         bottom: 30px;
 82         width: 40px;
 83         height: 40px;
 84         border-radius: 20px;
 85         cursor: pointer;
 86         transition: .3s;
 87         box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
 88         opacity: .5;
 89         z-index: 100;
 90     }
 91     .el-icon-caret-top{
 92         color: #fff;
 93         display: block;
 94         line-height: 40px;
 95         text-align: center;
 96         font-size: 18px;
 97     }
 98     p{
 99         display: none;
100         text-align: center;
101         color: #fff;
102     }
103     .page-up:hover{
104          opacity: 1;
105      }
106 </style>
107     

2、调用“回到顶部”组件

 1 <template>
 2     <div class="content-container-top">
 3         <ScrollTop> </ScrollTop>
 4     </div>
 5 </template>
 6
 7 <script>
 8     import ScrollTop from '../components/public/AppToTop.vue'
 9     export default {
10         name: "app-list",
11         components:{
12             ScrollTop
13         }
14
15     }
16 </script>