前端如何让用户回到上次阅读的位置？

在前端中，让用户回到上次阅读的位置（比如文章、长网页、文档等），可以通过以下几种方式实现。这些方法的核心思想是：记录用户离开时的滚动位置或内容位置，并在下次进入页面时恢复该位置。

一、使用 localStorage 记录滚动位置

这是最常见也是最简单的方式，适用于单页应用（SPA）和静态网站。

实现原理：

• 用户离开页面时，将当前滚动位置保存到 localStorage。
• 用户再次访问页面时，读取并设置滚动位置。

示例代码：

// 页面加载时恢复位置
window.addEventListener('load', () => {
  const savedScroll = localStorage.getItem('scrollPosition');
  if (savedScroll) {
    window.scrollTo(0, parseInt(savedScroll));
    localStorage.removeItem('scrollPosition'); // 可选：用完清除
  }
});

// 页面关闭/跳转前保存位置
window.addEventListener('beforeunload', () => {
  localStorage.setItem('scrollPosition', window.scrollY);
});

⚠️ 注意：beforeunload 在移动端可能不可靠，建议结合其他事件（如点击链接时手动保存）。

二、Vue2 中实现（组件级）

如果你使用 Vue2，可以在组件生命周期中记录滚动位置。

示例：

<template>
  <div class="article-content">
    <!-- 长内容 -->
    <p v-for="i in 50" :key="i">这里是段落 {{ i }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollKey: 'article-scroll-position'
    };
  },
  mounted() {
    // 恢复滚动位置
    const pos = localStorage.getItem(this.scrollKey);
    if (pos) {
      window.scrollTo(0, parseInt(pos));
    }
  },
  beforeDestroy() {
    // 保存滚动位置
    localStorage.setItem(this.scrollKey, window.scrollY);
  }
};
</script>

三、记录“章节”或“锚点”，而不是像素位置

如果你的内容有明确的章节结构，可以记录用户最后阅读的 章节 ID 或标题，然后通过 scrollIntoView 滚动到指定元素。

示例：

<h2 id="chapter3">第三章 内容</h2>

// 保存最后阅读的章节 ID
localStorage.setItem('lastChapter', 'chapter3');

// 页面加载后滚动到该章节
const lastChapter = localStorage.getItem('lastChapter');
if (lastChapter) {
  const element = document.getElementById(lastChapter);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
}

四、使用浏览器原生功能 —— history.scrollRestoration

现代浏览器支持自动保存滚动位置，但默认行为可能不够智能。

// 设置为 manual 后，你可以自定义滚动行为
history.scrollRestoration = 'manual';

你可以在页面加载时自己控制滚动逻辑，以获得更好的体验。

五、结合路由守卫（Vue Router）

如果你使用的是 Vue Router，可以在路由切换时记录和恢复滚动位置。

示例（Vue Router 3.x）：

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

如果你想更精细地控制每个页面的滚动状态，可以结合 localStorage 来扩展。

六、高级方案：记录“阅读百分比”或“时间戳”

如果你希望更智能地判断用户的阅读进度，可以：

• 记录用户已阅读了哪些段落；
• 计算阅读百分比；
• 根据时间戳判断是否需要重新定位。

例如：

let lastScrollTime = 0;

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const percent = Math.round((scrollTop / docHeight) * 100);

  if (percent >= 80 && Date.now() - lastScrollTime > 1000) {
    // 用户已经阅读了大部分内容
    localStorage.setItem('readPercent', percent);
    lastScrollTime = Date.now();
  }
});

总结：不同场景推荐方式