feat($core): using 'smooth-scroll'

vuejs · Nov 18, 2018 · 5b0cdcf · janvennemann · Dec 3, 2018 · ulivz
1 parent a3938b2
commit 5b0cdcf
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 27 deletions.
diff --git a/packages/@vuepress/core/lib/app/app.js b/packages/@vuepress/core/lib/app/app.js
@@ -62,21 +62,7 @@ export function createApp (isServer) {
     base: siteData.base,
     mode: 'history',
     fallback: false,
-    routes,
-    scrollBehavior: (to, from, saved) => {
-      if (saved) {
-        return saved
-      } else if (to.hash) {
-        if (Vue.$vuepress.$get('disableScrollBehavior')) {
-          return false
-        }
-        return {
-          selector: to.hash
-        }
-      } else {
-        return { x: 0, y: 0 }
-      }
-    }
+    routes
   })
 
   // redirect /foo to /foo/

diff --git a/packages/@vuepress/core/lib/app/root-mixins/updateLoadingState.js b/packages/@vuepress/core/lib/app/root-mixins/updateLoadingState.js
@@ -1,18 +1,13 @@
+import SmoothScroll from 'smooth-scroll/dist/smooth-scroll.js'
+
 export default {
   created () {
     this.$vuepress.$on('AsyncMarkdownContentMounted', () => {
-      this.$vuepress.$set('contentMounted', true);
+      this.$vuepress.$set('contentMounted', true)
 
-      [].slice.call(document.querySelectorAll('a[href^="#"]')).forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-          e.preventDefault()
-          history.pushState(history.state, document.title, e.target.href)
-          window.scroll({
-            top: e.target.offsetTop - 75,
-            left: 0,
-            behavior: 'smooth'
-          })
-        })
+      this.$smoothScroll = new SmoothScroll('a[href*="#"]', {
+        speed: 1000,
+        easing: 'easeInOutCubic'
       })
 
       if (this.$route.hash) {
@@ -37,6 +32,11 @@ export default {
   watch: {
     '$route.path' () {
       this.$vuepress.$set('contentMounted', false)
+      this.$smoothScroll.destroy()
     }
+  },
+
+  beforeDestroy () {
+    this.$smoothScroll.destroy()
   }
 }
diff --git a/packages/@vuepress/core/package.json b/packages/@vuepress/core/package.json
@@ -68,7 +68,8 @@
     "webpack-chain": "^4.6.0",
     "webpack-merge": "^4.1.2",
     "webpack-serve": "^1.0.2",
-    "webpackbar": "^2.6.1"
+    "webpackbar": "^2.6.1",
+    "smooth-scroll": "^15.0.0"
   },
   "engines": {
     "node": ">=8"

diff --git a/yarn.lock b/yarn.lock
@@ -8119,6 +8119,10 @@ [email protected]:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
+smooth-scroll@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/smooth-scroll/-/smooth-scroll-15.0.0.tgz#be4f9cb2cc4952d80db6736e5656ed5849305272"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"