增加页面滚动复位功能

This commit is contained in:
2025-09-03 12:53:36 +08:00
parent ad8a2a3b5d
commit 5825288d87
7 changed files with 236 additions and 18 deletions
+47 -6
View File
@@ -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)
})
}
})