Vue 进阶（九十九）：页面锚点至顶部

关注

发布于: 2 小时前

一、应用场景

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

在main.js 中添加代码：

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

复制代码

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

// chromedocument.body.scrollTop = 0// firefoxdocument.documentElement.scrollTop = 0// safariwindow.pageYOffset = 0

复制代码

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

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

复制代码

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

发布于: 2 小时前阅读数: 2

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论