更新页面

src/components/Monthly/MonthlyDetail.vue

@@ -76,7 +76,7 @@
                         <div style="display: flex;flex-direction:row;flex-wrap:wrap">
                             <a id="menuItems" v-for="(item,index2) in MonType" :key="index2" href="javascript:void(0)" @click="goAnchor(index2)">
                                     <div  style="display:flex;text-align: left">
-                                        <div style="margin-top:16px;margin-left:8vw;">
+                                        <div style="margin-top:16px;margin-left:4vw;">
                                             <i id="icon" :class="IconList[MonType[index2]]" style="font-size:25px;color:#fff;font-weight:550"></i>
                                             <span style="font-weight:550;margin-left:10px">{{MonType[index2]}}</span>
                                         </div>
@@ -87,6 +87,9 @@
                 </el-col>
             </el-row>
         </div>
+        <button class="backbutton" @click="backTop()">
+            <span  style="font-family: 华文琥珀;font-size:25px;color:#acbfe0">UP</span>
+        </button>
     </div>
 </template>
 
@@ -126,14 +129,16 @@ export default {
 
     },
     mounted() {
-        window.addEventListener('scroll', this.onScroll)
+        window.addEventListener('scroll', this.onScroll);
+        window.addEventListener('scroll', this.scrollToTop);
         this.initPage();
         this.getMonely();
         this.FreshItems();
     },
     destroy() {
         // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
-        window.removeEventListener('scroll', this.onScroll)
+        window.removeEventListener('scroll', this.onScroll);
+        window.removeEventListener('scroll', this.scrollToTop);
     },
     computed:{
         noMore() {
@@ -150,6 +155,28 @@ export default {
        next();
     },
     methods: {
+        backTop () {
+            const that = this
+            let timer = setInterval(() => {
+                let ispeed = Math.floor(-that.scrollTop / 5)
+                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
+                if (that.scrollTop === 0) {
+                    clearInterval(timer)
+                }
+            }, 16)
+        },
+
+        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
+        scrollToTop () {
+            const that = this
+            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+            that.scrollTop = scrollTop
+            if (that.scrollTop > 60) {
+                that.btnFlag = true
+            } else {
+                that.btnFlag = false
+            }
+        },
         //滚动
         // 点击切换锚点：
         goAnchor(id) {