#沸你不可#
队名:前端反卷大队
队员:@前端杨同学 @人生缺张草稿🌾
vue中页面跳转,显示在顶部
1. 路由中设置
scrollBehavior (to, from, savedPosition) {
console.log('savedPosition', savedPosition)
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
2. 可能是由于嵌入到别的位置造成上述方法失效
scrollIntoView()方法是一个IE6浏览器也支持的原生JS API,可以让元素进入视区,通过触发滚动容器的定位实现。
// 跳转后返回顶部
router.afterEach((to, from, next) => {
document.getElementById('app') && document.getElementById('app').scrollIntoView({ behavior: 'auto', block: 'start' })
})
scrollIntoView(scrollIntoViewOptions):这里的 scrollIntoViewOptions 是一个对象字面量形式的对象,可设置的属性:
{
behavior: "auto"(默认值) | "instant" | "smooth", // 动画过渡效果
block: "start"(默认值) |"center"| "end" | "nearest", // 垂直方向对齐
inline: "start"| "center"| "end" | "nearest"(默认值) // 水平方向对齐
}
使用 Vue 创建项目,如果在路由切换的时候有需要记住界面滚动位置的情况,可以使用scrollBehavior。
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
展开
评论