window.history.back()返回至滚动位置而非上一页的问题求助

问题分析 #

你遇到的情况是浏览器的滚动位置记忆机制导致的：当你在页面滚动后跳转，浏览器会把这个滚动位置存入历史记录的状态中，调用history.back()时，浏览器不仅加载上一页，还会自动恢复之前的滚动位置，这个操作可能被误判为“未改变历史栈”，导致再次点击返回时无法正确回溯到更早的页面。

解决方案 #

方案1：跳转前重置滚动位置并替换历史记录 #

在执行页面跳转的代码（比如点击链接或编程式跳转）前，添加以下逻辑，避免浏览器记录错误的历史状态：

// 跳转前重置滚动位置到顶部
window.scrollTo(0, 0);
// 替换当前历史记录条目，清除关联的滚动状态
history.replaceState(null, document.title, window.location.href);

方案2：强制指定跳转步数 #

如果方案1不适用，可以直接通过history.go()指定明确的回溯步数，跳过因滚动产生的无效历史记录：

function goBackProperly() {
  // 根据实际历史栈情况调整步数，比如需要回到前两个有效页面就传-2
  window.history.go(-2);
}

修改按钮的点击事件：

<div class="button cart-button left-right" >
<button class="btn" onclick="goBackProperly()" ><i class="lni lni-pointer-left"></i>Go Back</button>
</div>

方案3：禁用浏览器自动恢复滚动位置 #

在页面加载和卸载时强制重置滚动位置，覆盖浏览器的默认行为：

// 页面加载时重置滚动位置
window.addEventListener('load', () => {
  window.scrollTo(0, 0);
});

// 页面卸载时重置滚动位置，避免历史记录关联错误位置
window.addEventListener('unload', () => {
  window.scrollTo(0, 0);
});

关键原理 #

浏览器的History API会将页面滚动位置作为历史状态的一部分存储，滚动后跳转产生的历史条目会关联该位置。返回时浏览器先加载页面再恢复滚动位置，容易让你误以为历史栈未变化，但实际历史栈是正常的——只是滚动位置被自动恢复了。通过重置滚动位置或修改历史记录，就能规避这个问题。

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