继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue中页面跳转滚动条置顶(总结)

EIAR
关注TA
已关注
手记 7
粉丝 3
获赞 12

1.vue单个页面跳转时:

      在此页面上mounted方法中设置滚动条的方法

 mounted() {    
       // 切换页面时滚动条自动滚动到顶部
       window.scrollTo(0,0);
     }

2.全部页面,使用路由的钩子函数中设置(在router中main.js)

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
  // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
});

//或
router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})

3.全部页面,使用路由vue-router自带的滚动条行为解决(router中的index.js文件中)

//页面跳转显示在顶部
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }

4.layout布局时全部页面跳转滚动条置顶,使用vue-router路由方法是无效的,在layout布局的router-view层使用update设置

updated(){
    let dom = document.getElementsByClassName('layout-content')[0];
    dom.scrollTo(0,0);
}


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP