vue中使用vue-router切換頁(yè)面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
 // return 期望滾動(dòng)到哪個(gè)的位置
 }
})

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
 return savedPosition
 } else {
 return { x: 0, y: 0 }
 }
}

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
 return {
 selector: to.hash
 }
 }
}

 routes: [
 { path: '/', component: Home, meta: { scrollToTop: true }},
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</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 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 {
 const position = {}
 // new navigation.
 // scroll to anchor by returning the selector
 if (to.hash) {
 position.selector = to.hash
 }
 // check if any matched route config has meta that requires scrolling to top
 if (to.matched.some(m => m.meta.scrollToTop)) {
 // cords will be used if no selector is provided,
 // or if the selector didn't match any element.
 position.x = 0
 position.y = 0
 }
 // if the returned position is falsy or an empty object,
 // will retain current scroll position.
 return position
 }
}
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 scrollBehavior,
 routes: [
 { path: '/', component: Home, meta: { scrollToTop: true }},
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]
})

new Vue({
 router,
 template: `
 <div id="app">
 <h1>Scroll Behavior</h1>
 <ul>
 <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>
 `
}).$mount('#app')

router.afterEach((to,from,next) => {
 window.scrollTo(0,0);
});