如何解决position: fixed的header点击锚点链接后遮挡内容的问题？

这里有三种实用的解决方法，根据你的需求选择即可：

• CSS原生属性（推荐）：利用scroll-margin-top直接给目标区块设置顶部偏移，值等于你的fixed header高度（比如header高80px）。

/* 假设你的目标区块类名为section */
.section {
  scroll-margin-top: 80px;
}

这个属性会让浏览器滚动时自动预留出header的高度，确保目标内容完整显示，代码简洁且不需要额外元素。

• padding+负margin兼容方案：如果需要兼容不支持scroll-margin-top的旧浏览器，用这个技巧：

.section {
  padding-top: 80px;
  margin-top: -80px;
}

注意要保证区块的父元素没有设置overflow: hidden，如果区块有背景色，建议内部再套一个容器放内容，避免padding影响视觉布局。

• JavaScript手动控制：需要自定义滚动行为或者处理复杂场景时用这个方法：

// 给所有导航锚点绑定点击事件
document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认锚点跳转
    const targetId = link.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    if (!targetElement) return;
    
    const headerHeight = document.querySelector('header').offsetHeight;
    // 计算目标位置：元素顶部距离视口的高度 + 滚动条偏移量 - header高度
    const scrollPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
    
    window.scrollTo({
      top: scrollPosition,
      behavior: 'smooth' // 可选，开启平滑滚动
    });
  });
});

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