<template>
   <div id="goTop">
     <div class="goTop" v-show="goTopShow" @click="goTop">
       <div>回顶部</div>
     </div>
   </div>
 </template>
 <script>
   export default {
     name: "goTop",
     data() {
       return {
         scrollTop: "",
         goTopShow: false
       };
     },
     watch: {
       scrollTop(val) {
         if (this.scrollTop > 100) {
           this.goTopShow = true;
         } else {
           this.goTopShow = false;
         }
       }
     },
     methods: {
       handleScroll() {
         this.scrollTop =
           window.pageYOffset ||
           document.documentElement.scrollTop ||
           document.body.scrollTop;
         if (this.scrollTop > 100) {
           this.goTopShow = true;
         }
       },
       goTop() {
         let timer = null,
           _that = this;
         cancelAnimationFrame(timer);
         timer = requestAnimationFrame(function fn() {
           if (_that.scrollTop > 0) {
             _that.scrollTop -= 50;
             document.body.scrollTop = document.documentElement.scrollTop =
               _that.scrollTop;
             timer = requestAnimationFrame(fn);
           } else {
             cancelAnimationFrame(timer);
             _that.goTopShow = false;
           }
         });
       }
     },
     mounted() {
       window.addEventListener("scroll", this.handleScroll);
     },
     destroyed() {
       window.removeEventListener("scroll", this.handleScroll);
     }
   };
 </script>

 <style scoped>
   .goTop {
     position: fixed;
     right: 40px;
     bottom: 60px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #fff;
     padding: 10px;
     cursor: pointer;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
   }
   .goTop:hover .goTopIcon {
     color: rgba(51, 153, 255, 1);
   }
   .goTopIcon {
     font-size: 20px;
     color: rgba(51, 153, 255, 0.8);
   }
 </style>