vue中页面跳转滚动条置顶（总结）
1.vue单个页面跳转时：
在此页面上mounted方法中设置滚动条的方法
1 2 3 4 | mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } |
|---|
2.全部页面，使用路由的钩子函数中设置（在router中main.js）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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文件中）
1 2 3 4 5 6 7 8 | //页面跳转显示在顶部 scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } |
|---|
4.layout布局时全部页面跳转滚动条置顶，使用vue-router路由方法是无效的，在layout布局的router-view层使用update设置
1 2 3 4 | updated(){ let dom = document.getElementsByClassName('layout-content')[0]; dom.scrollTo(0,0); } |
|---|
腾讯云开发者
