如何实现用户重返网站时保留页面原有滚动位置？

这个功能完全可以实现，没有技术门槛，核心逻辑就是「用户离开页面时记录当前浏览位置，再次访问时读取记录自动定位」，基础版本纯前端就能完成，要精准匹配阅读的内容主题也可以通过增强逻辑实现，适配绝大多数场景。

这个版本实现最简单，适合页面结构固定、内容不会频繁变动的场景，用浏览器本地存储localStorage持久化保存位置即可，关闭浏览器后数据也不会丢失。

• 位置存储逻辑：监听页面滚动事件，加防抖避免频繁写入存储影响性能，同时在页面关闭、跳转、刷新的瞬间触发一次保存，防止最后一次滚动位置漏记。注意存储key要带上当前页面路径，避免多页面的位置数据互相覆盖。

// 防抖工具函数，减少存储写入频率
function debounce(func, delay = 300) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

const saveScrollPos = debounce(() => {
  localStorage.setItem(
    `scroll_pos_${location.pathname}`,
    window.scrollY
  );
});

// 监听滚动实时更新位置
window.addEventListener('scroll', saveScrollPos);
// 页面离开前强制保存一次
window.addEventListener('beforeunload', saveScrollPos);

• 自动定位逻辑：等页面所有DOM、静态资源加载完成后，读取本地存储的位置数据，滚动到对应坐标即可。

window.addEventListener('load', () => {
  const savedPos = localStorage.getItem(`scroll_pos_${location.pathname}`);
  if (savedPos !== null) {
    window.scrollTo({
      top: Number(savedPos),
      behavior: 'smooth' // 想要瞬间定位把这个改成'instant'
    });
  }
});

如果页面内容会动态更新、或者不同设备排版差异大，纯像素定位很容易出现偏移，这时候可以做内容级定位，直接匹配用户上次阅读的内容块，稳定性更高：

• 先给每个独立的内容主题块（比如文章章节、帖子卡片、段落容器）加上全局唯一的固定id属性
• 滚动时除了记录像素偏移，同时判断当前视口中用户正在阅读的内容块id，和像素值一起存储
• 页面加载时优先根据存储的内容块id定位，找不到对应块的时候再降级用像素定位，双重保险
  判断当前阅读内容块的参考代码：

const saveReadingPos = debounce(() => {
  // 替换成你自己页面的内容块选择器
  const contentBlocks = document.querySelectorAll('h2.chapter-title, .article-section, .post-item');
  let activeBlockId = '';
  // 查找顶部距离视口上沿最近、且在可视范围内的内容块
  for (const block of contentBlocks) {
    const rect = block.getBoundingClientRect();
    if (rect.top >= 0 && rect.top < window.innerHeight / 2) {
      activeBlockId = block.id;
      break;
    }
  }
  localStorage.setItem(`reading_pos_${location.pathname}`, JSON.stringify({
    blockId: activeBlockId,
    offset: window.scrollY
  }));
});

定位逻辑调整为：

window.addEventListener('load', () => {
  const savedData = localStorage.getItem(`reading_pos_${location.pathname}`);
  if (!savedData) return;
  const { blockId, offset } = JSON.parse(savedData);
  // 优先匹配内容块定位
  if (blockId) {
    const target = document.getElementById(blockId);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      return;
    }
  }
  // 匹配失败降级为像素定位
  window.scrollTo({ top: offset, behavior: 'smooth' });
});

• 如果页面是动态渲染的（比如接口拉取内容、懒加载图片），一定要等所有动态内容渲染完成、图片资源加载完毕后再执行滚动定位，否则会因为页面高度动态变化导致定位偏移
• 如果需要跨设备同步阅读位置，只需要把存在本地的位置数据同步到对应用户账号的后端数据库，用户登录后拉取数据执行定位即可
• 建议增加一个明显的「回到上次阅读位置」按钮触发定位，不要强制自动滚动，避免打断刚进入页面用户的操作路径

内容的提问来源于stack exchange，提问作者João Batista