回到顶部

liuqimichale
1 parent 7675bc90
Showing 1 changed file with 37 additions and 1 deletions
webintroduce/src/App.vue
@@ -7,6 +7,7 @@
       </keep-alive>
     </transition>
     <VFooter v-if="footerShow"></VFooter>
+    <div id="backToTop" class="backToTop" @click="scrollIntoView">回到顶部</div>
   </div>
 </template>
@@ -23,7 +24,32 @@ export default {
     return {
       footerShow: true,
       headerShow: true,
-      transitionName: 'transitionLeft'
+      transitionName: 'transitionLeft',
+      scrollShow: false,
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll',this.scrollToTop)
+  },
+  methods: {
+    scrollToTop() {
+      const topBtn = document.getElementById('backToTop')
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      if(scrollTop > 20){
+        topBtn.style.display = 'block'
+      }else{
+        topBtn.style.display = 'none'
+      }
+    },
+    scrollIntoView() {
+      const timer = setInterval(function () {
+        let osTop = document.documentElement.scrollTop || document.body.scrollTop
+        let ispeed = Math.floor(-osTop / 5)
+        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
+        if (osTop === 0) {
+          clearInterval(timer)
+        }
+      }, 30)
     }
   },
   watch: {
@@ -47,6 +73,7 @@ export default {
   display: flex;
   flex-flow: column;
   min-height: 100vh;
+  position: relative;
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -69,4 +96,13 @@ export default {
     transform: translate(-100%, 0);
     -webkit-transform: translate(-100%, 0);
   }
+  .backToTop{
+    position: fixed;
+    width: 100px;
+    height: 40px;
+    background-color: #f00;
+    right:10px;
+    bottom: 10px;
+    display: none;
+  }
 </style>