Vue进阶（九十九）：vue中页面跳转显示顶部

应用场景

在做vue项目时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法。

方式一

在main.js 中添加代码：

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

  

 

  
1
  
2
  
3
 

方式二

如果需要某个页面跳转回顶部，仅需要在当前页面（page）合适的位置加入一下代码即可：

// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

方式三

在路由的index.js中，加入以下代码也可实现路由改变定位到顶部的效果，savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用，代码如下：

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

应用以上方法，会发现每次打开页面都是显示的是页面顶部内容，再也不会显示页面底部或者其他位置影响用户体验。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/104574196