vue中页面跳转滚动条置顶(总结)

1.vue单个页面跳转时:

在此页面上mounted方法中设置滚动条的方法

 
 
mounted() { 
    // 切换页面时滚动条自动滚动到顶部 
    window.scrollTo(0,0); 
}

2.全部页面,使用路由的钩子函数中设置(在router中main.js)

router.afterEach((to,from,next) => { 
window.scrollTo(0,0);
 // chrome 
document.body.scrollTop = 0 
// firefox
 document.documentElement.scrollTop = 0 
// safari window.pageYOffset = 0 
});
//或 router.beforeEach((to, from, next) => { 
// chrome
 document.body.scrollTop = 0 
// firefox 
document.documentElement.scrollTop = 0 
// safari 
window.pageYOffset = 0 next() 
})

3.全部页面,使用路由vue-router自带的滚动条行为解决(router中的index.js文件中)

//页面跳转显示在顶部 
scrollBehavior (to, from, savedPosition) {
 if (savedPosition) { 
return savedPosition 
} else { 
return { x: 0, y: 0 } } }

posted @ 2021-03-17 10:40  Pei你看雪  阅读(29)  评论(0)    收藏  举报  来源