vue中页面跳转滚动条置顶

1.vue单个页面跳转时：

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

mounted() {            // 切换页面时滚动条自动滚动到顶部        
    window.scrollTo(0,0);      
}
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() })

2、全部页面，使用路由vue-router自带的滚动条行为解决（router中的index.js文件中）

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

//或者使用这个
//新加载页面滚动条置顶
router.afterEach((to, from, next)=> {
  window.scrollTo(0, 0);
});

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

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/yiyihuazi/article/details/104013577
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-08 10:33:14
阅读 ( 840 )
分类：前端

vue中页面跳转滚动条置顶

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看