如何加载第二页并定位到指定锚点且避免浏览器滚动

云上老周

2026-7-25

实现页面直接加载到锚点位置（无滚动效果）

可行，通过以下两种方法可以让Chrome加载页面时直接定位到锚点，避免先显示页面顶部再滚动的视觉效果：

方法一：禁用浏览器自动滚动恢复 + 手动瞬间定位

浏览器默认会在加载带hash的URL时自动滚动到对应锚点，我们可以通过History API关闭这个自动行为，再手动瞬间定位到锚点：

// 在DOM结构加载完成后立即执行
document.addEventListener('DOMContentLoaded', function() {
  // 关闭浏览器自动滚动恢复功能
  window.history.scrollRestoration = 'manual';

  // 检查URL是否包含锚点
  if (window.location.hash) {
    const anchorId = window.location.hash.slice(1);
    const target = document.getElementById(anchorId);
    if (target) {
      // 瞬间滚动到锚点，无动画效果
      target.scrollIntoView({ behavior: 'instant', block: 'start' });
    }
  }
});

方法二：提前拦截锚点滚动（更彻底）

如果上面的方法偶尔仍出现滚动痕迹，可以在页面加载的更早阶段拦截默认滚动：

// 页面刚开始加载就执行，建议放在<head>标签内
(function() {
  const hash = window.location.hash;
  if (hash) {
    // 先强制滚动到顶部，抵消浏览器默认滚动
    window.scrollTo(0, 0);
    // 等DOM加载完成后定位到锚点
    document.addEventListener('DOMContentLoaded', function() {
      const target = document.getElementById(hash.slice(1));
      if (target) {
        target.scrollIntoView({ behavior: 'instant' });
      }
    });
  }
})();