首页 > 其他 > 详细

切换到新路由时,页面要滚动到顶部或保持原先的滚动位置怎么做呢

时间:2020-10-15 22:19:17      阅读:72      评论:0      收藏:0      [点我收藏+]

vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法:
https://www.cnblogs.com/kugeliu/p/7172042.html

vue-router有提供一个方法scrollBehavior,它可以使切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。

这个功能只在 HTML5 history 模式下可用。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})
{ x: number, y: number }
{ selector: string }
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
 
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

 


vue2.0路由切换后页面跳转后新页面滚动位置不变BUG(滚动条回到顶部的位置):
https://blog.csdn.net/ZHIYUANfL/article/details/79241655

解决办法很简单,如下,直接监测watch路由变化,然后将body的滚动距离scrollTop赋值为0。

export default {
        watch:{
            ‘$route‘:function(to,from){
           document.body.scrollTop = 0;
                 document.documentElement.scrollTop = 0;
           }

        }
    }


返回到上次滚动位置:
https://blog.csdn.net/yan263364/article/details/84402595

切换到新路由时,页面要滚动到顶部或保持原先的滚动位置怎么做呢

原文:https://www.cnblogs.com/zhilu/p/13823194.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!