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

方式一:

在main.js中添加以下代码即可:

router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})
 
 
或者下面代码:
 
// 跳转后返回顶部
 router.afterEach((to,from,next) => {
      window.scrollTo(0,0);
 })

方式二:如果需要某个页面跳转回顶部,仅需要在当前页面(page)合适的位置加入一下代码即可:

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

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

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


原博客地址:https://blog.csdn.net/wh_xmy/article/details/89332122

Logo

前往低代码交流专区

更多推荐