vue路由跳转时定位到页面顶部的方法

原

vue路由跳转时定位到页面顶部的方法汇总

2019年04月16日 14:21:55 wh_xmy 阅读数：106

背景：在做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