页面锚点滚动时目标元素被导航栏遮挡的解决方法

下面是几个实用的解决办法，根据你的场景选择即可：

方法1：CSS scroll-margin-top（最简单推荐） #

直接给目标div设置scroll-margin-top，数值等于顶部固定导航的高度，浏览器会自动预留出这个间距，滚动时就不会被导航挡住。

#page1 {
  /* 替换成你实际的导航高度，比如80px */
  scroll-margin-top: 80px;
}

这个属性目前主流浏览器都支持，代码量最少，优先推荐使用。

方法2：锚点占位元素（兼容老浏览器） #

如果需要兼容不支持scroll-margin-top的旧浏览器，可以在目标div上方加一个隐藏的占位锚点：

<!-- 占位锚点，高度等于导航高度，负margin抵消自身空间 -->
<div id="page1-anchor" style="display: block; height: 80px; margin-top: -80px; visibility: hidden;"></div>
<!-- 原目标div -->
<div id="page1">你的内容...</div>

然后把链接指向这个占位锚点：

<a href="#page1-anchor">跳转到page1</a>

滚动时会定位到占位锚点的位置，刚好让下方的div显示在导航下方。

方法3：JavaScript手动控制滚动（自定义需求） #

如果需要平滑滚动，或者导航高度是动态变化的（比如响应式导航），可以用JS手动计算滚动位置：

// 给所有锚点链接绑定点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault(); // 阻止默认跳转行为
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    if (!targetElement) return;
    
    // 获取导航的实际高度
    const navHeight = document.querySelector('nav').offsetHeight;
    // 计算目标位置：元素顶部视口高度 + 滚动条偏移量 - 导航高度
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
    
    // 执行滚动，behavior: 'smooth' 为可选的平滑滚动效果
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  });
});

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