support scroll to anchor in scrollBehavior

Author: yyx990803

examples/scroll-behavior/app.js

@@ -5,21 +5,36 @@ Vue.use(VueRouter)
 
 const Home = { template: '<div>home</div>' }
 const Foo = { template: '<div>foo</div>' }
-const Bar = { template: '<div>bar</div>' }
+const Bar = {
+  template: `
+    <div>
+      bar
+      <div style="height:500px"></div>
+      <p id="anchor">Anchor</p>
+    </div>
+  `
+}
 
 // scrollBehavior:
 // - only available in html5 history mode
-// - defaults to false
-// - if set to true, remembers and restores scroll position on popstate
-// - or use a function to conditionally return a position
-const scrollBehavior = (to, from, isPopState) => {
-  if (!isPopState || to.matched.some(m => m.meta.scrollToTop)) {
-    // explicitly control scroll behavior
-    // scroll to top on new navigations or routes that requires scrolling to top
-    return { x: 0, y: 0 }
+// - defaults to no scroll behavior
+// - return false to prevent scroll
+const scrollBehavior = (to, from, savedPosition) => {
+  if (savedPosition) {
+    // savedPosition is only available for popstate navigations.
+    return savedPosition
+  } else {
+    // new navigation.
+    // scroll to anchor
+    if (to.hash) {
+      return { anchor: true }
+    }
+    // explicitly control scroll position
+    // check if any matched route config has meta that requires scrolling to top
+    if (to.matched.some(m => m.meta.scrollToTop)) {
+      return { x: 0, y: 0 }
+    }
   }
-  // for popstate navigations, use saved position
-  return true
 }
 
 const router = new VueRouter({
@@ -42,6 +57,7 @@ new Vue({
         <li><router-link to="/">/</router-link></li>
         <li><router-link to="/foo">/foo</router-link></li>
         <li><router-link to="/bar">/bar</router-link></li>
+        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

examples/scroll-behavior/index.html

@@ -3,7 +3,8 @@
 <style>
 .view {
   border: 1px solid red;
-  height: 1000px;
+  height: 2000px;
+  position: relative;
 }
 </style>
 <a href="/">&larr; Examples index</a>

flow/declarations.js

@@ -10,7 +10,7 @@ declare type RouterOptions = {
   mode?: string;
   base?: string;
   linkActiveClass?: string;
-  scrollBehavior?: boolean | () => boolean | Object;
+  scrollBehavior?: Function;
 }
 
 declare type RedirectOption = string | { name: string }

src/history/html5.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import type VueRouter from '../index'
+import { assert } from '../util/warn'
 import { cleanPath } from '../util/path'
 import { History } from './base'
 
@@ -64,30 +65,40 @@ export class HTML5History extends History {
       return
     }
 
-    let shouldScroll = false
     const behavior = router.options.scrollBehavior
-    if (typeof behavior === 'boolean') {
-      shouldScroll = behavior
-    } else if (typeof behavior === 'function') {
-      shouldScroll = behavior(to, from, isPop)
+    if (!behavior) {
+      return
     }
 
+    assert(typeof behavior === 'function', `scrollBehavior must be a function`)
+
+    let position = getScrollPosition()
+    const shouldScroll = behavior(to, from, isPop ? position : null)
     if (!shouldScroll) {
       return
     }
 
-    let position = getScrollPosition()
-    if (typeof shouldScroll === 'object' &&
-        shouldScroll.x != null &&
-        shouldScroll.y != null) {
-      position = shouldScroll
-    }
-    if (position) {
-      const { x, y } = position
-      router.app.$nextTick(() => {
-        window.scrollTo(x, y)
-      })
-    }
+    // wait until re-render finishes before scrolling
+    router.app.$nextTick(() => {
+      const isObject = typeof shouldScroll === 'object'
+      if (isObject && shouldScroll.x != null && shouldScroll.y != null) {
+        position = shouldScroll
+      } else if (isObject && shouldScroll.anchor) {
+        const el = document.querySelector(to.hash)
+        if (el) {
+          const docTop = document.documentElement.getBoundingClientRect().top
+          const elTop = el.getBoundingClientRect().top
+          position = {
+            x: window.scrollX,
+            y: elTop - docTop
+          }
+        }
+      }
+
+      if (position) {
+        window.scrollTo(position.x, position.y)
+      }
+    })
   }
 }