From 6081a3d75261e3c8dcef5655cd264a8e2d1d554f Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Mon, 30 Apr 2018 18:48:47 +0800
Subject: [PATCH] fix: unexpected scroll behavior after clicking sidebar links
 (#298)

---
 lib/app/app.js               |  8 +++++++-
 lib/app/store.js             |  7 +++++++
 lib/default-theme/Layout.vue | 11 +++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 lib/app/store.js

diff --git a/lib/app/app.js b/lib/app/app.js
index 924a966356..44db745354 100644
--- a/lib/app/app.js
+++ b/lib/app/app.js
@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Content from './Content'
 import ClientOnly from './ClientOnly'
 import dataMixin from './dataMixin'
+import store from './store'
 import NotFound from '@notFound'
 import { routes } from '@temp/routes'
 import { siteData } from '@temp/siteData'
@@ -57,7 +58,12 @@ export function createApp () {
       if (saved) {
         return saved
       } else if (to.hash) {
-        return false
+        if (store.disableScrollBehavior) {
+          return false
+        }
+        return {
+          selector: to.hash
+        }
       } else {
         return { x: 0, y: 0 }
       }
diff --git a/lib/app/store.js b/lib/app/store.js
new file mode 100644
index 0000000000..115fe0b9e6
--- /dev/null
+++ b/lib/app/store.js
@@ -0,0 +1,7 @@
+// It is not yet time to use Vuex to manage the global state
+// singleton object as a global store.
+const state = {
+  disableScrollBehavior: false
+}
+
+export default state
diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue
index 7ad99f1190..df988d69d7 100644
--- a/lib/default-theme/Layout.vue
+++ b/lib/default-theme/Layout.vue
@@ -28,6 +28,7 @@ import Navbar from './Navbar.vue'
 import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
 import { pathToComponentName } from '@app/util'
+import store from '@app/store'
 import { resolveSidebarItems } from './util'
 import throttle from 'lodash.throttle'
 
@@ -165,7 +166,7 @@ export default {
       const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
       const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
         .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
-        
+
       const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
 
       for (let i = 0; i < anchors.length; i++) {
@@ -177,7 +178,13 @@ export default {
             (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
 
         if (isActive && this.$route.hash !== anchor.hash) {
-          this.$router.replace(anchor.hash)
+          store.disableScrollBehavior = true
+          this.$router.replace(anchor.hash, () => {
+            // execute after scrollBehavior handler.
+            this.$nextTick(() => {
+              store.disableScrollBehavior = false
+            })
+          })
           return
         }
       }