【我的作品】实现回到顶部按钮

src/views/material/works/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="works con">
+    <div class="back-top" @click="onClickBackTop" v-show="isShowBackTopBtn" >回到顶部</div>
     <div class="tab">
       <span>我的作品 {{workTotalNum !== undefined ? `(${workTotalNum})`:''}}</span>
       <div class="tab-r">
@@ -22,6 +23,8 @@
       v-infinite-scroll="requestMoreData"
       :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData"
       infinite-scroll-distance="315"
+      ref="w-list-ref"
+      @scroll.self="onWorkListScroll"
     >
       <li class="add-work" @click="add">
         <div class="add-con">
@@ -108,6 +111,9 @@ export default {
       showPreview:false,
       showItem:'',
       shareItem:'',
+
+      isBackingTop: false,
+      isShowBackTopBtn: false,
     }
   },
   mounted(){
@@ -226,6 +232,34 @@ export default {
           this.isRequestingMoreData = false
         }
       );
+    },
+    onClickBackTop() {
+      if (this.isBackingTop) {
+        return
+      }
+      this.isBackingTop = true
+
+      const startTime = Date.now()
+      const totalScroll = this.$refs['w-list-ref'].scrollTop
+      const fn = () => {
+        if (this.$refs['w-list-ref'].scrollTop === 0) {
+          this.isBackingTop = false
+          return
+        } 
+
+        const nowTime = Date.now()
+        const assumeScrollTop = totalScroll - (nowTime - startTime) * totalScroll / 500
+        this.$refs['w-list-ref'].scrollTop = assumeScrollTop > 0 ? assumeScrollTop : 0
+        requestAnimationFrame(fn)
+      }
+      requestAnimationFrame(fn)
+    },
+    onWorkListScroll(e) {
+      if (e.target.scrollTop >= 200) {
+        this.isShowBackTopBtn = true
+      } else {
+        this.isShowBackTopBtn = false
+      }
     }
   }
 }
@@ -237,6 +271,22 @@ export default {
 .works{
   width: 100%;
   flex-direction: column;
+  .back-top {
+    position: fixed;
+    right: 0;
+    bottom: 50px;
+    width: 50px;
+    height: 50px;
+    background-color: #3355ee;
+    z-index: 1;
+    border-radius: 50%;
+    text-align: center;
+    color: white;
+    font-size: 10px;
+    line-height: 50px;
+    cursor: pointer;
+
+  }
   .tab{
     flex: 0 0 auto;
     width: 100%;