如何强制Chrome刷新时优先跳转URL指定锚点而非上次滚动位置

Chrome等现代浏览器默认开启历史记录滚动恢复特性，页面刷新时会自动还原用户上次停留的滚动位置，该行为的触发时机晚于jQuery的$(document).ready事件。你在ready回调中写入的锚点跳转逻辑会先执行，随后被浏览器默认的滚动恢复行为覆盖，最终出现定位到上次滚动位置、而非URL指定锚点的问题。

第一步：禁用浏览器默认自动滚动恢复 #

在所有滚动相关逻辑的最前面添加如下代码，手动关闭浏览器的自动滚动恢复能力：

if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual';
}

第二步：调整锚点跳转的执行时机 #

不要仅在$(document).ready中执行跳转逻辑：ready触发时页面图片、异步渲染内容可能还未加载完成，锚点元素位置计算容易出错，且无法覆盖浏览器后续的滚动恢复行为。
建议绑定pageshow事件（页面首次加载、刷新、从缓存恢复时都会触发）执行跳转，搭配短延时确保逻辑在浏览器默认行为之后执行，替换原有代码即可：

// 禁用自动滚动恢复
if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual';
}

$(window).on('pageshow', function () {
  const targetHash = window.location.hash;
  if (!targetHash) return;
  
  // 先重置滚动位置，避免旧位置干扰
  window.scrollTo(0, 0);
  // 10ms延时确保浏览器默认行为执行完毕
  setTimeout(() => {
    const targetElement = document.querySelector(targetHash);
    if (targetElement) {
      targetElement.scrollIntoView();
      // 也可以直接用 location.href = targetHash 实现跳转
    }
  }, 10);
});

如果需要兼容不支持scrollRestoration属性的老旧浏览器，可以额外添加页面离开前的滚动重置逻辑，进一步避免旧滚动位置的干扰：

$(window).on('beforeunload', function () {
  window.scrollTo(0, 0);
});

如果页面存在大量图片、懒加载模块，建议在对应资源加载完成后再执行一次锚点定位，避免内容动态撑开导致的锚点位置偏移。

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