1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue中页面跳转滚动条置顶

vue中页面跳转滚动条置顶

时间:2020-02-19 17:38:10

相关推荐

vue中页面跳转滚动条置顶

1.vue单个页面跳转时:

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

mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0);}router.afterEach((to,from,next) => { window.scrollTo(0,0); // chromedocument.body.scrollTop = 0// firefoxdocument.documentElement.scrollTop = 0// safariwindow.pageYOffset = 0 }); //或 router.beforeEach((to, from, next) => { // chromedocument.body.scrollTop = 0// firefoxdocument.documentElement.scrollTop = 0// safariwindow.pageYOffset = 0next() })

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

//页面跳转显示在顶部 scrollBehavior(to,from,savedPosition){ if(savedPosition){ returnsavedPosition }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); }

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。