WordPress页面刷新后如何保持在原有浏览位置不动

原有代码失效原因 #

• jQuery(document).ready 仅在DOM结构加载完成时触发，此时图片、异步加载的模块还未渲染完成，页面实际高度不稳定，此时执行的滚动会被后续页面高度变化覆盖，出现回弹效果。
• 1ms的setTimeout没有实际作用，仍然早于资源加载完成的时间点。
• unload事件触发时页面已经开始卸载，此时修改滚动位置不会被浏览器记录，无实际效果。

可行解决方案 #

方案一：使用浏览器原生滚动恢复（优先推荐） #

浏览器本身自带刷新后恢复滚动位置的能力，只需在页头最靠前的位置插入以下代码启用即可，不需要额外手动记录位置：

if ('scrollRestoration' in history) {
  // auto为恢复原有位置，如需固定回到顶部可改为manual后配合window.scrollTo(0,0)使用
  history.scrollRestoration = 'auto';
}

方案二：手动存储滚动位置（兼容老旧场景） #

如果站点有大量异步加载内容导致原生API失效，可以用sessionStorage手动记录和恢复滚动位置：

// 页面卸载前存储当前滚动位置
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('scrollPos', window.scrollY.toString());
});

// 等所有资源加载完成、页面高度稳定后再恢复位置
window.addEventListener('load', () => {
  const savedPos = sessionStorage.getItem('scrollPos');
  if (savedPos) {
    window.scrollTo(0, parseInt(savedPos, 10));
    sessionStorage.removeItem('scrollPos');
  }
});

WordPress添加代码的正确方式 #

不要直接将代码写入菜单模板，建议在主题functions.php文件中添加以下代码，保证脚本优先加载，避免被其他逻辑覆盖：

add_action('wp_head', function() {
?>
<script>
// 此处粘贴上方选择的JS代码
</script>
<?php
}, 1); // 优先级设为1，保证脚本最早加载

额外排查点 #

如果修改后仍有滚动偏移，可依次排查以下问题：

• 主题懒加载未给图片设置宽高占位，图片加载后撑开页面导致滚动偏移，给图片添加固定宽高属性即可修复。
• 存在平滑滚动、阅读进度条、回到顶部类的第三方插件修改滚动逻辑，暂时禁用这类插件验证是否正常。
• 站点有AJAX动态加载内容的场景，需要在动态内容插入完成后再触发滚动恢复逻辑。

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