开发项目的时候 遇到了不能回到顶部的问题,但是网上搜了好多都没有作用,
1 官方文档关于scrollTop不能回到顶部问题的介绍 点击
对于所有路由导航,简单地让页面滚动到顶部。
返回 savedPosition,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
2 使用beforeEach 这个页可以在单独的页面使用 这个方法也是无效
router.beforeEach((to, from, next) => {
// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0
next() // 要调用next 否则不生效
})```
**3 最终方案 在 main.js 挂载vue实例上面 这个虽然实现了在顶部的方案 但并不是最优的解决方案**
```javascript
let vm = new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
router.afterEach((to, from) => {
if (from.name == 'PropertyList' || from.name == 'houseDetail' ){
vm.$el.scrollTop = 0;
}
});```