移除页面URL哈希并阻止锚点跳转的跨浏览器兼容方案咨询

行为差异原因 #

Chrome 和 Firefox 对页面初始锚点滚动的触发时机、与history.replaceState的执行优先级逻辑不同，是出现该问题的核心原因：

• Chrome 会优先执行页面<head>中的同步脚本，若脚本在锚点滚动触发前就移除了哈希，后续不会再执行对应滚动动作。
• Firefox 的锚点滚动逻辑优先级更高，会以页面初始加载时的URL哈希值为基准，在DOM解析、同步脚本全部执行完成后才触发滚动，中途通过replaceState修改URL哈希不会阻止该滚动动作。

该问题确实和脚本执行位置有关，但即使将移除哈希的脚本放在页面最顶部，也无法覆盖 Firefox 的初始锚点滚动逻辑。

跨浏览器兼容解决方案 #

以下方案均兼容所有主流现代浏览器，可根据你的实际场景选择：

方案1：表单提交前移除index.html哈希（最推荐） #

从根源避免跳转后URL携带哈希，没有后续兼容问题：

// 纯JS实现，替换yourFormId为你的表单实际ID
document.querySelector('#yourFormId').addEventListener('submit', function() {
  history.replaceState('', document.title, window.location.pathname + window.location.search);
});

jQuery实现：

$('#yourFormId').on('submit', function() {
  history.replaceState('', document.title, window.location.pathname + window.location.search);
});

方案2：result.html强制滚动到顶部（适配无法修改index.html的场景） #

若无法修改index.html的提交逻辑，可在result.html中等待浏览器自带锚点滚动完成后，强制滚动到顶部：

window.addEventListener('load', function() {
  // 移除哈希
  if (location.hash) {
    history.replaceState('', document.title, location.origin + location.pathname + location.search);
  }
  // 无动画滚动到顶部，避免用户感知滚动过程
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'instant'
  });
});

如果觉得load事件等待时间过长，可使用双重requestAnimationFrame保证在浏览器原生滚动后执行：

if (location.hash) {
  history.replaceState('', document.title, location.origin + location.pathname + location.search);
  // 两次requestAnimationFrame确保跳过浏览器原生锚点滚动帧
  requestAnimationFrame(() => requestAnimationFrame(() => window.scrollTo(0, 0)));
}

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