增加页面滚动复位功能
This commit is contained in:
+47
-6
@@ -67,19 +67,60 @@ const router = createRouter({
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
// 如果有保存的位置(浏览器前进/后退),则恢复到该位置
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
return new Promise((resolve) => {
|
||||
// 延迟一点时间确保页面加载完成
|
||||
setTimeout(() => {
|
||||
resolve(savedPosition)
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
|
||||
// 检查是否有保存的自定义滚动位置
|
||||
const savedScrollPosition = sessionStorage.getItem(`scroll_${to.fullPath}`)
|
||||
if (savedScrollPosition) {
|
||||
try {
|
||||
const position = JSON.parse(savedScrollPosition)
|
||||
// 清除保存的位置,避免重复使用
|
||||
sessionStorage.removeItem(`scroll_${to.fullPath}`)
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(position)
|
||||
}, 100)
|
||||
})
|
||||
} catch (error) {
|
||||
console.warn('解析保存的滚动位置失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 如果有锚点,则滚动到锚点位置
|
||||
if (to.hash) {
|
||||
return {
|
||||
el: to.hash,
|
||||
behavior: 'smooth'
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
// 使用 nextTick 确保 DOM 更新完成
|
||||
setTimeout(() => {
|
||||
const element = document.querySelector(to.hash)
|
||||
|
||||
if (element) {
|
||||
resolve({
|
||||
el: to.hash,
|
||||
behavior: 'smooth',
|
||||
top: 0 // 添加 top 偏移,确保元素完全可见
|
||||
})
|
||||
} else {
|
||||
// 如果元素不存在,滚动到顶部
|
||||
resolve({ top: 0 })
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
|
||||
// 否则滚动到页面顶部
|
||||
return { top: 0 }
|
||||
return new Promise((resolve) => {
|
||||
// 延迟一点时间,确保页面加载完成
|
||||
setTimeout(() => {
|
||||
resolve({ top: 0 })
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user