如何捕获hash锚点链接触发的滚动事件并调整滚动偏移量？

嘿，这个问题我之前做项目的时候也碰到过！固定导航栏确实会把锚点定位的内容给挡住，下面几个方案应该能完美解决你的需求，从简单到灵活都有：

方案一：纯CSS实现（最简单） #

如果你的场景不需要平滑滚动，纯CSS的:target伪类就能搞定，不用写一行JS：

/* 给锚点目标元素添加偏移 */
:target {
  /* 顶部内边距等于导航高度，把内容往下推 */
  padding-top: 120px;
  /* 负的外边距抵消内边距带来的布局偏移，避免页面整体下移 */
  margin-top: -120px;
  /* 确保元素的裁剪范围包含内边距区域，防止内容被裁剪 */
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

优点：零JS，实现简单，兼容性好；
注意点：如果目标元素本身有自定义的margin或padding，需要微调数值来适配。

方案二：JavaScript手动控制（灵活可控） #

如果需要平滑滚动，或者要处理更复杂的场景，JS方案会更靠谱，分两种情况处理：

1. 页面加载时的Hash锚点处理 #

当用户直接访问带Hash的链接（比如www.example.com/#about），页面加载后手动调整滚动位置：

window.addEventListener('load', function() {
  // 检查当前URL是否有Hash
  if (window.location.hash) {
    const targetId = window.location.hash.slice(1);
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      const navHeight = 120;
      // 计算目标元素的实际滚动位置：元素顶部距离视口的高度 + 页面已滚动高度 - 导航高度
      const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
      
      // 执行滚动，可选平滑效果
      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth'
      });
    }
  }
});

2. 点击页面内锚点链接的处理 #

阻止浏览器默认跳转行为，手动计算滚动位置并更新URL Hash：

// 监听所有以#开头的锚点链接
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    // 阻止默认跳转
    e.preventDefault();
    const targetId = this.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      const navHeight = 120;
      const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
      
      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth'
      });
      
      // 更新URL的Hash，确保刷新页面后仍能定位到正确位置
      window.history.pushState(null, null, `#${targetId}`);
    }
  });
});

进阶：使用scrollIntoView简化代码 #

用现代浏览器支持的scrollIntoView方法，代码更简洁：

// 页面加载时处理
window.addEventListener('load', () => {
  if (window.location.hash) {
    const target = document.querySelector(window.location.hash);
    if (target) {
      // 先让元素滚动到视口顶部
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // 因为scrollIntoView是异步的，延迟调整偏移
      setTimeout(() => {
        window.scrollBy(0, -120);
      }, 100);
    }
  }
});

// 点击锚点时处理
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    const target = document.querySelector(anchor.getAttribute('href'));
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      setTimeout(() => {
        window.scrollBy(0, -120);
        window.history.pushState(null, null, anchor.getAttribute('href'));
      }, 100);
    }
  });
});

方案对比 #

• CSS方案：适合简单场景，无需JS，兼容性好，但不支持平滑滚动；
• JS方案：支持平滑滚动，能处理复杂边界情况，比如动态加载的锚点元素，灵活性更高。

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