Vue项目页面刷新和跳转后滚动条的置顶问题

1.场景

当页面出现滚动条时，在滚动到某个位置后，

• 再次刷新页面，页面仍处于上次访问过的位置。
• 切换路由时，页面仍处于上次访问过的位置。
• 切换路由时，如何将滚动条平滑滚动到顶部？
• 页面回退时，如何定位到上次访问的位置？

2.问题

百度搜索后发现，提供的方案都只是解决了其中的一个问题，要么只解决了页面刷新后滚动条置顶的问题，要么只解决了切换路由时滚动条置顶的问题。

3.解决方案

结合官网和大家提供的思路，找到了一种相对完美的解决方案。有更好的方法，欢迎吐槽哦！

第一步：解决刷新和页面回退的问题

设置router的文件中，加入

export default new Router({
  routes: [],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) { // 页面回退至上次访问的位置
      return savedPosition
    } else { // 页面刷新，滚动条置顶
      return { 
        top: 0,
        behavior:'smooth'
      }
    }
  }
})

第二步：解决切换页面滚动条平滑滚动至顶部的问题

入口文件main.js 的进行下列设置

router.afterEach((to,from,next) => {
  window.scrollTo({ // 页面切换时，滚动条平滑切换至顶部
    top:0,
    behavior:'smooth'
  })
})

参考

1.Vue Router滚动行为

2.使用scrollTo平滑滚动到顶部