From 70f47792b2f4f60711f27b06d4a0e78efc4ec2d2 Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Wed, 9 May 2018 17:59:23 +0100
Subject: [PATCH 1/8] not done

---
 lib/default-theme/ScrollTop.vue | 45 +++++++++++++++++++++++++++++++++
 package.json                    |  1 +
 2 files changed, 46 insertions(+)
 create mode 100644 lib/default-theme/ScrollTop.vue

diff --git a/lib/default-theme/ScrollTop.vue b/lib/default-theme/ScrollTop.vue
new file mode 100644
index 0000000000..de966f0c29
--- /dev/null
+++ b/lib/default-theme/ScrollTop.vue
@@ -0,0 +1,45 @@
+<template>
+  <main v-if="show">
+    <button>Go To Top</button>
+  </main>
+</template>
+
+<script>
+import debounce from 'lodash.debounce'
+
+export default {
+  props: {
+    threshold: {
+      type: Number,
+      default
+    }
+  },
+
+  data: () => ({
+    isShow: false
+  }),
+  mounted () {
+    window.addEventListener('scroll', debounce(() => {
+      if (this.getScrollTop() < 300) return this.hide()
+      this.show()
+    }, 300))
+  },
+  methods: {
+    getScrollTop () {
+      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+    },
+
+    show () {
+      this.isShow = true
+    },
+
+    hide () {
+      this.isShow = false
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/package.json b/package.json
index e490caa9df..5504b817c7 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "koa-mount": "^3.0.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",

From 4d15378f78d1c9503673353b718812a4f4d076e7 Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Wed, 9 May 2018 22:34:54 +0100
Subject: [PATCH 2/8] added scrolltotop

---
 lib/default-theme/Page.vue        |  7 ++-
 lib/default-theme/ScrollToTop.vue | 71 +++++++++++++++++++++++++++++++
 lib/default-theme/ScrollTop.vue   | 45 --------------------
 3 files changed, 77 insertions(+), 46 deletions(-)
 create mode 100644 lib/default-theme/ScrollToTop.vue
 delete mode 100644 lib/default-theme/ScrollTop.vue

diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue
index 05b1cbce12..ac6286af92 100644
--- a/lib/default-theme/Page.vue
+++ b/lib/default-theme/Page.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="page">
+    <ScrollToTop/>
     <Content :custom="false"/>
     <div class="content edit-link" v-if="editLink">
       <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
@@ -29,10 +30,14 @@
 
 <script>
 import OutboundLink from './OutboundLink.vue'
+import ScrollToTop from './ScrollToTop.vue'
 import { resolvePage, normalize, outboundRE, endingSlashRE } from './util'
 
 export default {
-  components: { OutboundLink },
+  components: {
+    OutboundLink,
+    ScrollToTop
+  },
   props: ['sidebarItems'],
   computed: {
     lastUpdated () {
diff --git a/lib/default-theme/ScrollToTop.vue b/lib/default-theme/ScrollToTop.vue
new file mode 100644
index 0000000000..ca9526b650
--- /dev/null
+++ b/lib/default-theme/ScrollToTop.vue
@@ -0,0 +1,71 @@
+<template>
+  <transition name="fade">
+    <div v-if="show" class="go-to-top" @click="scrollToTop">⬆</div>
+  </transition>
+</template>
+
+<script>
+import debounce from 'lodash.debounce'
+
+export default {
+  props: {
+    threshold: {
+      type: Number,
+      default: 300
+    }
+  },
+
+  data: () => ({
+    show: false
+  }),
+
+  mounted () {
+    window.addEventListener('scroll', debounce(() => {
+      this.show = this.shouldShow()
+    }, 100))
+  },
+
+  methods: {
+    shouldShow () {
+      const scrollTop = window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop || 0
+      return scrollTop > this.threshold
+    },
+    scrollToTop () {
+      window.scrollTo(0, 0)
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './styles/config.styl'
+
+$iconSize = 2.3rem
+
+.go-to-top
+  cursor pointer
+  font-size $iconSize
+  border 1px solid $textColor
+  border-radius 0.2rem
+  position fixed
+  bottom 3rem
+  right 3rem
+  text-align center
+  line-height $iconSize
+  width $iconSize
+  background white
+  z-index 1
+
+@media (max-width: $MQNarrow)
+  .go-to-top
+    display none
+
+.fade-enter-active, .fade-leave-active
+  transition opacity .3s
+
+.fade-enter, .fade-leave-to
+  opacity 0
+</style>
diff --git a/lib/default-theme/ScrollTop.vue b/lib/default-theme/ScrollTop.vue
deleted file mode 100644
index de966f0c29..0000000000
--- a/lib/default-theme/ScrollTop.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <main v-if="show">
-    <button>Go To Top</button>
-  </main>
-</template>
-
-<script>
-import debounce from 'lodash.debounce'
-
-export default {
-  props: {
-    threshold: {
-      type: Number,
-      default
-    }
-  },
-
-  data: () => ({
-    isShow: false
-  }),
-  mounted () {
-    window.addEventListener('scroll', debounce(() => {
-      if (this.getScrollTop() < 300) return this.hide()
-      this.show()
-    }, 300))
-  },
-  methods: {
-    getScrollTop () {
-      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
-    },
-
-    show () {
-      this.isShow = true
-    },
-
-    hide () {
-      this.isShow = false
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

From 08425378a34fe6a701fe1b44d7fa229045ac9dba Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Thu, 10 May 2018 15:48:51 +0100
Subject: [PATCH 3/8] updated vue component

---
 lib/default-theme/ScrollToTop.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/lib/default-theme/ScrollToTop.vue b/lib/default-theme/ScrollToTop.vue
index ca9526b650..4f0714a775 100644
--- a/lib/default-theme/ScrollToTop.vue
+++ b/lib/default-theme/ScrollToTop.vue
@@ -15,26 +15,33 @@ export default {
     }
   },
 
-  data: () => ({
-    show: false
-  }),
+  data () {
+    return {
+      scrollTop: this.getScrollTop()
+    }
+  },
 
   mounted () {
     window.addEventListener('scroll', debounce(() => {
-      this.show = this.shouldShow()
+      this.scrollTop = this.getScrollTop()
     }, 100))
   },
 
   methods: {
-    shouldShow () {
-      const scrollTop = window.pageYOffset ||
+    getScrollTop () {
+      return window.pageYOffset ||
         document.documentElement.scrollTop ||
         document.body.scrollTop || 0
-      return scrollTop > this.threshold
     },
     scrollToTop () {
       window.scrollTo(0, 0)
-      this.show = false
+      this.scrollTop = 0
+    }
+  },
+
+  computed: {
+    show () {
+      return this.scrollTop > this.threshold
     }
   }
 }

From 000f780b0286e4296fe4b595dcd9ab14d20702f6 Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Sat, 12 May 2018 07:41:02 +0100
Subject: [PATCH 4/8] edited icon

---
 lib/default-theme/ScrollToTop.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/lib/default-theme/ScrollToTop.vue b/lib/default-theme/ScrollToTop.vue
index 4f0714a775..7e56381d40 100644
--- a/lib/default-theme/ScrollToTop.vue
+++ b/lib/default-theme/ScrollToTop.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="fade">
-    <div v-if="show" class="go-to-top" @click="scrollToTop">⬆</div>
+    <div v-if="show" class="go-to-top" @click="scrollToTop"></div>
   </transition>
 </template>
 
@@ -50,21 +50,31 @@ export default {
 <style lang="stylus" scoped>
 @import './styles/config.styl'
 
-$iconSize = 2.3rem
+$iconSize = 1.5rem
 
 .go-to-top
   cursor pointer
-  font-size $iconSize
-  border 1px solid $textColor
-  border-radius 0.2rem
   position fixed
-  bottom 3rem
-  right 3rem
+  bottom 1rem
+  right 1rem
   text-align center
   line-height $iconSize
   width $iconSize
-  background white
+  height $iconSize
+  color $accentColor
   z-index 1
+  &::before
+    content ''
+    display block
+    height "calc(%s / 2 - 3px)" % $iconSize
+    width "calc(%s / 2 - 3px)" % $iconSize
+    border-top currentColor 3px solid
+    border-left currentColor 3px solid
+    position absolute
+    transform translateY(-33%) rotate(45deg)
+    transform-origin 0 0
+    left 50%
+    top 50%
 
 @media (max-width: $MQNarrow)
   .go-to-top

From 5ad2ef8bb8d9e7c20ccf1a717d3a4d0cfa46112b Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Sat, 12 May 2018 07:43:06 +0100
Subject: [PATCH 5/8] updated icon size

---
 lib/default-theme/ScrollToTop.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/default-theme/ScrollToTop.vue b/lib/default-theme/ScrollToTop.vue
index 7e56381d40..bd3852d3b1 100644
--- a/lib/default-theme/ScrollToTop.vue
+++ b/lib/default-theme/ScrollToTop.vue
@@ -50,7 +50,7 @@ export default {
 <style lang="stylus" scoped>
 @import './styles/config.styl'
 
-$iconSize = 1.5rem
+$iconSize = 2rem
 
 .go-to-top
   cursor pointer
@@ -68,8 +68,8 @@ $iconSize = 1.5rem
     display block
     height "calc(%s / 2 - 3px)" % $iconSize
     width "calc(%s / 2 - 3px)" % $iconSize
-    border-top currentColor 3px solid
-    border-left currentColor 3px solid
+    border-top currentColor 5px solid
+    border-left currentColor 5px solid
     position absolute
     transform translateY(-33%) rotate(45deg)
     transform-origin 0 0

From 3953d050beacb36c0786d754e445079f50d33a68 Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Sat, 12 May 2018 07:49:53 +0100
Subject: [PATCH 6/8] added hover color and config to switch

---
 docs/.vuepress/config.js          | 1 +
 lib/default-theme/ScrollToTop.vue | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index ad70d04dba..fe7c7a8ed3 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -26,6 +26,7 @@ module.exports = {
   serviceWorker: true,
   theme: 'vue',
   themeConfig: {
+    showScrollToTop: true,
     repo: 'vuejs/vuepress',
     editLinks: true,
     docsDir: 'docs',
diff --git a/lib/default-theme/ScrollToTop.vue b/lib/default-theme/ScrollToTop.vue
index bd3852d3b1..d965f35790 100644
--- a/lib/default-theme/ScrollToTop.vue
+++ b/lib/default-theme/ScrollToTop.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="fade">
+  <transition name="fade" v-if="$site.themeConfig.showScrollToTop">
     <div v-if="show" class="go-to-top" @click="scrollToTop"></div>
   </transition>
 </template>
@@ -61,8 +61,10 @@ $iconSize = 2rem
   line-height $iconSize
   width $iconSize
   height $iconSize
-  color $accentColor
+  color $textColor
   z-index 1
+  &:hover
+    color $accentColor
   &::before
     content ''
     display block
@@ -81,7 +83,7 @@ $iconSize = 2rem
     display none
 
 .fade-enter-active, .fade-leave-active
-  transition opacity .3s
+  transition opacity 0.3s
 
 .fade-enter, .fade-leave-to
   opacity 0

From b36f50219a2348452ab22b44a5cd2a57942b1aea Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Sat, 2 Jun 2018 11:12:45 +0100
Subject: [PATCH 7/8] style: used svg for back to top icon

---
 lib/default-theme/ScrollToTop.vue | 34 +++++++++++++------------------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/lib/default-theme/ScrollToTop.vue b/lib/default-theme/ScrollToTop.vue
index d965f35790..4c6dbd1d01 100644
--- a/lib/default-theme/ScrollToTop.vue
+++ b/lib/default-theme/ScrollToTop.vue
@@ -1,6 +1,15 @@
 <template>
   <transition name="fade" v-if="$site.themeConfig.showScrollToTop">
-    <div v-if="show" class="go-to-top" @click="scrollToTop"></div>
+    <svg v-if="show"
+      class="go-to-top"
+      @click="scrollToTop"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 261.9 226.7">
+      <g transform="matrix(1.3333333,0,0,-1.3333333,0,400) translate(178.0626,235.0086)">
+        <path fill="currentColor" d="M-138.8-105L-79.9-3L-21-105h39.3L-79.9,65l-98.2-170H-138.8z"/>
+      </g>
+    </svg>
   </transition>
 </template>
 
@@ -34,7 +43,7 @@ export default {
         document.body.scrollTop || 0
     },
     scrollToTop () {
-      window.scrollTo(0, 0)
+      window.scrollTo({ top: 0, behavior: 'smooth' })
       this.scrollTop = 0
     }
   },
@@ -55,28 +64,13 @@ $iconSize = 2rem
 .go-to-top
   cursor pointer
   position fixed
-  bottom 1rem
-  right 1rem
-  text-align center
-  line-height $iconSize
+  bottom 2rem
+  right 2.5rem
   width $iconSize
-  height $iconSize
-  color $textColor
+  color  lighten($accentColor, 30%)
   z-index 1
   &:hover
     color $accentColor
-  &::before
-    content ''
-    display block
-    height "calc(%s / 2 - 3px)" % $iconSize
-    width "calc(%s / 2 - 3px)" % $iconSize
-    border-top currentColor 5px solid
-    border-left currentColor 5px solid
-    position absolute
-    transform translateY(-33%) rotate(45deg)
-    transform-origin 0 0
-    left 50%
-    top 50%
 
 @media (max-width: $MQNarrow)
   .go-to-top

From ae9d8d28a6a4144c899ee5e52a7d8e07ee816dfc Mon Sep 17 00:00:00 2001
From: Jason Yu <me@ycmjason.com>
Date: Thu, 21 Jun 2018 09:06:25 +0100
Subject: [PATCH 8/8] updated icon svg

---
 lib/default-theme/ScrollToTop.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/lib/default-theme/ScrollToTop.vue b/lib/default-theme/ScrollToTop.vue
index 4c6dbd1d01..0a7d8b7a90 100644
--- a/lib/default-theme/ScrollToTop.vue
+++ b/lib/default-theme/ScrollToTop.vue
@@ -1,13 +1,12 @@
 <template>
   <transition name="fade" v-if="$site.themeConfig.showScrollToTop">
     <svg v-if="show"
-      class="go-to-top"
-      @click="scrollToTop"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 261.9 226.7">
-      <g transform="matrix(1.3333333,0,0,-1.3333333,0,400) translate(178.0626,235.0086)">
-        <path fill="currentColor" d="M-138.8-105L-79.9-3L-21-105h39.3L-79.9,65l-98.2-170H-138.8z"/>
+         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>