如何在Wordpress站点实现页面刷新后停留在原浏览位置

实现原理 #

通过前端本地存储记录用户实时滚动位置，页面加载完成后自动跳转至存储的位置，无需后端额外配置。

推荐实现方式（无插件轻量方案） #

直接在主题页脚插入JS代码即可，操作步骤如下：

• 登录WordPress后台，进入「外观」-「主题文件编辑器」
• 在右侧文件列表找到当前使用主题的footer.php文件
• 将以下代码粘贴到文件末尾</body>标签的上方，保存修改即可

<script>
// 存储滚动位置
window.addEventListener('beforeunload', function () {
  localStorage.setItem('wp_last_scroll', window.scrollY);
});
// 恢复滚动位置
window.addEventListener('load', function () {
  const scrollPos = localStorage.getItem('wp_last_scroll');
  if (scrollPos !== null) {
    window.scrollTo(0, parseInt(scrollPos, 10));
    // 恢复后清除存储，避免首次打开站点时跳转到旧位置
    localStorage.removeItem('wp_last_scroll');
  }
});
</script>

注意事项 #

• 如果你的主题支持在线更新，建议使用子主题修改文件，避免主题更新后自定义代码被覆盖
• 若不会修改主题文件，可使用任意自定义代码插入插件，将上述JS代码插入到全站页脚位置即可
• 如果需要仅对文档类页面生效，可给代码加判断条件，比如仅页面类型为page的内容生效，只需将上述逻辑包裹在判断语句内：

if (document.body.classList.contains('page')) {
  // 上面的存储+恢复逻辑放这里
}

代码不生效排查 #

如果修改后测试没有效果，优先清理站点缓存、浏览器缓存后再重试。如果站点本身有平滑滚动配置，可将window.scrollTo(0, parseInt(scrollPos, 10))修改为以下内容适配平滑效果：

window.scrollTo({
  top: parseInt(scrollPos, 10),
  behavior: 'smooth'
})

插件方案（无需改代码） #

如果不想手动修改代码，可直接在WordPress插件市场搜索「记住滚动位置」类的插件，安装启用后一般无需额外配置即可生效。

内容的提问来源于stack exchange，提问作者Terry