[筆記] window.location.reload 重新載入後滾動到指定位置 Vue3 @地瓜大的飛翔旅程

章節連結

內容
程式碼

實作在 Vue3 如何達成「畫面重新載入」後，自動滾動到指定位置的效果。

內容

這個效果可以拆成 3 步：

1. 記錄位置

重新整理前，記錄下畫面滾動的距離 -> 一般會是 window.scrollY

2. 狀態持久化與初始化

頁面重新載入後，先將要滾動的數值，從 localStorage 取出，然後賦值給一個變數。此變數建議初始值為 0

3. 透過 nextTick() 確保畫面已經完成渲染後，再行滾動效果

程式碼

// 1. 記錄 (例如存在 sessionStorage)
sessionStorage.setItem('scrollPos', window.scrollY.toString());
window.location.reload()

// 2 & 3. 恢復
onMounted(async () => {
  const savedPos = Number(sessionStorage.getItem('scrollPos')) || 0;
  await nextTick();
  window.scrollTo({ top: savedPos, behavior: 'smooth' });
});