前端实战：如何实现用户上次阅读位置恢复

在阅读类、资讯类、博客、文档、论坛、长文章详情页等场景中，让用户下次打开（或返回）时自动滚回到上次阅读位置，是提升用户体验的经典需求。

当前主流实现方案已经非常成熟，以下按实用性 + 稳定性 + 性能从高到低排序，附带代码示例和优缺点对比。

方案对比表（推荐优先级）

优先级	方案	适用场景	优点	缺点 / 注意事项	推荐指数
★★★★★	URL Hash + 章节/段落锚点 + localStorage	长文章、文档、章节化内容	分享友好、SEO 友好、内容变动不漂移	需要提前给关键节点加 id	最高
★★★★☆	IntersectionObserver + 探针元素	无限滚动 / 懒加载长列表	精准记录已读到哪个区块、内容动态变化鲁棒	代码稍复杂、需插入探针元素	非常推荐
★★★★	scrollY + localStorage + 节流/防抖	普通静态长页	实现最简单、兼容性极好	内容增删/高度变化会导致位置漂移	基础首选
★★★	Vue/React Router scrollBehavior	SPA 单页应用（列表 → 详情 → 返回）	框架原生支持、优雅	只适合路由切换，不适合刷新/关闭浏览器后恢复	SPA 必备
★★☆	sessionStorage 或 memory cache	只在本会话内记住	更轻量、不污染 localStorage	关闭浏览器/标签就丢失	辅助

1. 最推荐：URL Hash + 章节锚点 + localStorage 双保险（鲁棒性最高）

思路：

• 给文章重要章节/段落加 id（h2/h3/p 等）
• 滚动时实时（节流）更新 URL hash 为当前最靠近视口的章节 id
• 同时把当前章节 id 存 localStorage（防用户直接刷新没 hash）
• 进入页面时：优先读 hash → 次选 localStorage → 最后默认顶部

<!-- 文章结构示例 -->
<article id="article-detail">
  <h2 id="section-1">第一章：引言</h2>
  <p>...</p>
  <h2 id="section-2">第二章：原理</h2>
  <!-- ... 更多章节 -->
</article>

// 1. 工具函数：找当前最接近视口顶部的 heading 元素
function getCurrentSection() {
  const headings = document.querySelectorAll('h2,h3'); // 或其他章节标志
  let current = null;
  let minDistance = Infinity;
  headings.forEach(h => {
    const rect = h.getBoundingClientRect();
    const distance = Math.abs(rect.top); // 距离视口顶部
    if (distance < minDistance) {
      minDistance = distance;
      current = h;
    }
  });
  return current?.id;
}

// 2. 节流更新 hash & storage
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      const sectionId = getCurrentSection();
      if (sectionId) {
        // 更新 URL hash（不刷新页面）
        history.replaceState(null, '', `#${sectionId}`);
        // 同时存 localStorage（key 建议带文章唯一 id）
        localStorage.setItem(`read-pos-${location.pathname}`, sectionId);
      }
      ticking = false;
    });
    ticking = true;
  }
}, { passive: true });

// 3. 页面加载时恢复
window.addEventListener('load', () => {
  let targetId = location.hash.slice(1); // 优先 hash
  if (!targetId) {
    targetId = localStorage.getItem(`read-pos-${location.pathname}`);
  }
  if (targetId) {
    const el = document.getElementById(targetId);
    if (el) {
      // 可加一点偏移，避免正好卡在顶部看不见标题
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // 或 window.scrollTo(0, el.offsetTop - 80);
    }
  }
});

优点：内容布局变化也不容易漂移，用户可直接分享带 # 的链接。

2. IntersectionObserver + 探针元素（适合动态/无限加载内容）

思路：在文章中每隔 N 段插入一个透明的'探针'div（高度很小），用 IO 观察哪个探针进入视口，就记录它的 data-id。

<p>段落内容...</p>
<div class="probe" data-id="para-15"></div>
<p>下一段...</p>

const probes = document.querySelectorAll('.probe');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const id = entry.target.dataset.id;
      localStorage.setItem(`read-pos-${location.pathname}`, id);
      // 可选：更新 URL hash 如 #para-15
    }
  });
}, { threshold: 0.8 }); // 进入 80% 就算'读到'
probes.forEach(p => observer.observe(p));

// 恢复时
const savedId = localStorage.getItem(`read-pos-${location.pathname}`);
if (savedId) {
  document.querySelector(`[data-id="${savedId}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

优点：对懒加载、虚拟列表友好，内容增删不影响已记录的区块。

3. 最简单方案：scrollY + localStorage（适合静态页）

// 保存（节流 200ms）
let saveTimer;
window.addEventListener('scroll', () => {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(() => {
    localStorage.setItem(`scroll-${location.pathname}`, window.scrollY);
  }, 200);
});

// 恢复
window.addEventListener('load', () => {
  const saved = localStorage.getItem(`scroll-${location.pathname}`);
  if (saved) {
    window.scrollTo(0, parseInt(saved));
  }
});

注意：内容高度变化会导致漂移 → 所以优先用上面两种。

4. Vue/React Router 项目额外福利

// Vue Router
const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition; // 浏览器前进/后退
    return { top: 0 }; // 新页面默认顶部
    // 或结合 localStorage 自定义恢复
  }
});

// React Router v6
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function ScrollToTop() {
  const { pathname } = useLocation();
  useEffect(() => {
    const saved = localStorage.getItem(`scroll-${pathname}`);
    window.scrollTo(0, saved ? parseInt(saved) : 0);
  }, [pathname]);
  // ... 同时监听 scroll 保存
}

总结：推荐组合拳

1. 静态/半静态长文 → URL Hash + localStorage 双存（首选）
2. 无限滚动/动态内容 → IntersectionObserver 探针
3. SPA 路由切换 → 框架 scrollBehavior + storage 兜底
4. key 设计：用 location.pathname 或文章唯一 ID（如 /post/123 → read-pos-/post/123）
5. 清理：可加过期时间（如 7 天后自动删），避免 localStorage 塞满