vue路由跳转时进入新的页面,但位置却不在顶部

(1)问题背景

路由跳转时进入新的页面,但位置却不在顶部,而是在上个页面浏览的位置,在每次进入新页面时,想让它定位在页面的顶部。

方式一

main.js

router.beforeEach((to, from, next) => {

// chrome

document.body.scrollTop = 0

// firefox

document.documentElement.scrollTop = 0

// safari

window.pageYOffset = 0

next()

})

每次点击分页的时候,页面也会停留在之前浏览的位置,在调完接口后也加入下面几行代码就好了。

// chrome

document.body.scrollTop = 0

// firefox

document.documentElement.scrollTop = 0

// safari

window.pageYOffset = 0

方式二

router-index.js

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

 

亦或是

scrollBehavior (to, from, savedPosition) {

if (savedPosition) {

return savedPosition

} else {

return { x: 0, y: 0 }

}

}

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值