feat: 回到顶部按钮

src/components/ToTopButton.vue

+<template>
+  <Transition name="to-top">
+    <a
+      v-show="showing"
+      href="javascript:;"
+      class="to-top icon-top-gray"
+      @click="toTop"
+    ></a>
+  </Transition>
+</template>
+<script>
+export default {
+  name: 'ToTopButton',
+  props: {
+    threshold: {
+      type: [Number, String],
+      default: '20%',
+    },
+  },
+  data() {
+    return {
+      showing: false,
+    }
+  },
+  computed: {
+    thresholdNumber() {
+      const t = this.threshold
+      if (typeof t === 'number') return t
+      if (typeof t === 'string') {
+        let m
+        if ((m = /^(\d+)%$/.exec(t))) {
+          return window.innerHeight * (+m[1] / 100)
+        }
+      }
+      return 0
+    },
+  },
+  created() {
+    window.addEventListener('resize', this.onScroll)
+    window.addEventListener('scroll', this.onScroll)
+    this.onScroll()
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.onScroll)
+    window.removeEventListener('resize', this.onScroll)
+  },
+  methods: {
+    onScroll() {
+      const top = window.scrollY
+      this.showing = top >= this.thresholdNumber
+    },
+    toTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    },
+  },
+}
+</script>
+<style lang="scss">
+.to-top {
+  position: fixed;
+  z-index: 9999;
+  right: 10vw;
+  bottom: 10vh;
+  display: block;
+  width: 50px;
+  height: 50px;
+  opacity: 0.8;
+}
+
+.to-top-enter-active,
+.to-top-leave-active {
+  transition: 0.3s;
+  background-repeat: no-repeat;
+}
+
+.to-top-enter,
+.to-top-leave-to {
+  opacity: 0;
+  transform: translateY(50px);
+  // background-position-y: 50px;
+}
+</style>

src/styles/icon.scss

@@ -11,4 +11,9 @@
 .icon-thumb-gold {
   background-size: 100%;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAbCAYAAABiFp9rAAAAAXNSR0IArs4c6QAAAexJREFUSA1jZCARPJ9kq/Xnz98p/xkZrIBa3zEyMCySkZauYwxb/QufUSz4JNHlns305fr97e0eBob/kgz/wbKSQKr8ydOnIE4FunpkPhMyhxD77/d3kQz//0uyCSsySEdMZRBxzAdrAVoWR0gvSRYBLQEbyK1qz8DEysnAKaMPMR9oOdUsejbFSh4YZLYMzCwMXPImhMzFkCfaR/9+M8T8/8/AyCmtz8DExoVhECEBoi0CxkMsyDAuJUtCZmKVJ8qixxNszP///6/OxMbNwCmth9UgQoIELXreZ63N8P/vLJBBXMpWDIxMJOUIuP0sj/osgaGCG/xm+AdMAwwMzFyCDHw63jgVopjDyPgcqOkMy3+mbqmio4dBmgj6iImdh4FLwZxBzKOKgZmDD6dFKBKg5P6fwfcvw78DT/qsq0ByjDCXyMbOQ1H7eHESmI8ujqIIB+fvtw8MX+8fY/h4YQMD478//5gZmBwI+giHWXiFmbkEGPi0vRj4DQJAoc70h/FfKU0sgrmCWxFU7oIAowlNLQL5DAyAcUZTiyC2QMhRi5BDgyT2aNCRFFzIimkadKCiCAyAhSxNLQKVdxAALMmhLKpSKIUqA8M/ZmB1AS+9qWoT1DBg4/IfIwNTrUzR0Taa+IgBWvGBfAKr+AAgLYr8RyyZ+gAAAABJRU5ErkJggg==);
+}
+
+.icon-top-gray {
+  background-size: 100%;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAABB1JREFUeAHtmv1LU2EUx91aIoIrc1NrRpsz86XlmLGZKCKCivoH+kcI/tAviiI6zU0cw60yM6emaTpr64XAci+dM3pEBnL3nG33XuM8IM99Od/nPudzvvd1GiYnJ19WcJMmYJRWsCBHgMERjcDgGByRAFHGjmNwRAJEGTuOwREJEGXsOAZHJECUseMYHJEAUcaOY3BEAkQZO47BEQkQZew4BkckQJSZiDpFWX9//5OWlhanwWDQ1NXZbDazs7MTW15efq84aYmAsiXldDodWkNDDjgHnIsEk4JCywYuFovtYbULmkUZg3AOOJdSH8LAv3LRkJbNcbTp3BwVgyPWisExOCIBoky3jmtvb29obm6+R8yr7LKyPQAXM/ORkZEum832EMewWq1v1tbW9osZrxxa3TnO5/M5BTRMuLOzs6Otra2hHMkXM6auwPX19bUCqPa8hIy9vb3dLpfLlrdd01XdgBsYGOhohXYNDaPX63V7PJ5H1+xXfbMuwA0NDbngfbJZZH9ycnIslhOJxFdchlcng9vtduGpLPZp2WsKzmg0VgwPD3c9goYQ4IU8Gw6HXx8fH38RUPb39492d3djYh1PZfzyIta16jUDB9AMo6OjnqamptzdEwBk19fXIxsbGx/zYSwuLr7b2tq6/Cz0GNrg4ODT/Dg11zUBZzKZjGNjY88bGxsf/Es2EwwGw9Fo9NN1ya+urn6A/W/RlRjjcDjs6FZ0rRZN9aNWVlbeGh8f99bX1+ceMeDalV5ZWQltbm5+VgIQCoX24C8KcTl46FZwbTcUwqCkLfV+VcFVVVWZAJqvrq7OgolkMpn00tLS+vb2drzQxCKRyCG6E+WoAdfeB/d6oSCq5qLawaqrq29PTEz01NbW5l6j0un0xcLCQhAu/Jc3gkLhoTv9fn8IwaPGYrFYoSA9WJhCxyg2ThVweE2DxF6Yzea7OOFUKvVnfn4+eHBwkKQmAL8jxOGmsQYFSOEYWBA8hlqnrSrg4EJuqampMWOCFxcXv+fm5gJHR0ffcb2YBo8qCShAAAuB49yBZrfbrcWMWahWFWsfHh4mkslk7kEWbgTRs7OzX4VOUCkOCzA7OxuAZ7tncKOpgHWyi5WOdXW/KuDOz89T09PTgasHLuXy6enpz6mpqVelHFNpLFVOVaVJ3MT9DI5YNQbH4IgEiDJ2HIMjEiDK2HEMjkiAKGPHMTgiAaKMHcfgiASIMnYcgyMSIMrYcQyOSIAoY8f9T+Di8fg3kc/VZbFND70qn85lE4X/HfkxMzPjRx0uy+rViNclOD0DE0Xha5wgIdkzOElgIpzBCRKSPYOTBCbCGZwgIdkzOElgIpzBCRKSPYOTBCbCGZwgIdkzOElgIpzBCRKSPYOTBCbCGZwgIdkzOElgIpzBCRKS/V/i3SHk3MapJwAAAABJRU5ErkJggg==);
 }
\ No newline at end of file

src/views/Home/HomePageWrapper.vue

@@ -5,15 +5,18 @@
       <router-view />
     </div>
     <HomePageFooter />
+
+    <ToTopButton />
   </div>
 </template>
 <script>
 import HomePageHeader from '@/components/HomePageHeader.vue'
 import HomePageFooter from '@/components/HomePageFooter.vue'
+import ToTopButton from '@/components/ToTopButton.vue'
 
 export default {
   name: 'HomePage',
-  components: { HomePageHeader, HomePageFooter },
+  components: { HomePageHeader, HomePageFooter, ToTopButton },
   beforeRouteUpdate(to, from, next) {
     window.scrollTo({
       top: 0,