feat: back to top

docs/.vuepress/config.js

@@ -26,6 +26,7 @@ module.exports = {
   serviceWorker: true,
   theme: 'vue',
   themeConfig: {
+    showScrollToTop: true,
     repo: 'vuejs/vuepress',
     editLinks: true,
     docsDir: 'docs',

lib/default-theme/Page.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page">
+    <ScrollToTop/>
     <Content :custom="false"/>
     <div class="page-edit">
       <div class="edit-link" v-if="editLink">
@@ -30,9 +31,13 @@
 </template>
 
 <script>
+import ScrollToTop from './ScrollToTop.vue'
 import { resolvePage, normalize, outboundRE, endingSlashRE } from './util'
 
 export default {
+  components: {
+    ScrollToTop
+  },
   props: ['sidebarItems'],
   computed: {
     lastUpdated () {

lib/default-theme/ScrollToTop.vue

@@ -0,0 +1,83 @@
+<template>
+  <transition name="fade" v-if="$site.themeConfig.showScrollToTop">
+    <svg v-if="show"
+         class="go-to-top"
+         @click="scrollToTop"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284">
+      <g transform="translate(-229 -126.358)">
+        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"/>
+        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"/>
+      </g>
+    </svg>
+  </transition>
+</template>
+
+<script>
+import debounce from 'lodash.debounce'
+
+export default {
+  props: {
+    threshold: {
+      type: Number,
+      default: 300
+    }
+  },
+
+  data () {
+    return {
+      scrollTop: this.getScrollTop()
+    }
+  },
+
+  mounted () {
+    window.addEventListener('scroll', debounce(() => {
+      this.scrollTop = this.getScrollTop()
+    }, 100))
+  },
+
+  methods: {
+    getScrollTop () {
+      return window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop || 0
+    },
+    scrollToTop () {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      this.scrollTop = 0
+    }
+  },
+
+  computed: {
+    show () {
+      return this.scrollTop > this.threshold
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './styles/config.styl'
+
+$iconSize = 2rem
+
+.go-to-top
+  cursor pointer
+  position fixed
+  bottom 2rem
+  right 2.5rem
+  width $iconSize
+  color  lighten($accentColor, 30%)
+  z-index 1
+  &:hover
+    color $accentColor
+
+@media (max-width: $MQNarrow)
+  .go-to-top
+    display none
+
+.fade-enter-active, .fade-leave-active
+  transition opacity 0.3s
+
+.fade-enter, .fade-leave-to
+  opacity 0
+</style>

package.json

@@ -64,6 +64,7 @@
     "koa-range": "^0.3.0",
     "koa-static": "^4.0.2",
     "loader-utils": "^1.1.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "lru-cache": "^4.1.2",
     "markdown-it": "^8.4.1",