固定导航栏锚点跳转偏移，目标区域顶部被截断求助

你的问题根源在于固定定位（position: fixed）的Header会脱离文档流，占据页面顶部空间，但浏览器默认的锚点跳转是将目标元素顶部对齐到视口顶部，所以目标区域的顶部会被Header挡住。下面是几种实用的解决方法：

方法1：给锚点目标元素添加偏移样式 #

先确认你的Header高度（可以通过浏览器开发者工具查看#header的offsetHeight，比如假设是80px），然后给每个锚点对应的目标元素添加以下CSS：

/* 替换成你的锚点ID */
#features, #how-made, #pricing {
  padding-top: 80px; /* 值等于Header的高度 */
  margin-top: -80px; /* 抵消padding-top带来的布局偏移，不影响页面原有排版 */
}

方法2：使用CSS scroll-padding-top（推荐，现代浏览器适用） #

直接给整个页面设置滚动内边距，一次配置所有锚点都生效：

html {
  scroll-padding-top: 80px; /* 值等于Header的高度 */
}

这个方法无需修改每个目标元素，简洁高效，支持Chrome、Firefox、Edge等主流现代浏览器。

方法3：JavaScript手动控制滚动位置（兼容旧浏览器） #

如果需要兼容IE等旧浏览器，可以通过JS拦截点击事件，计算正确的滚动位置：

document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    const headerHeight = document.getElementById('header').offsetHeight;
    window.scrollTo({
      top: target.offsetTop - headerHeight,
      behavior: 'smooth' // 可选，开启平滑滚动
    });
  });
});

补充：建议给Header设置固定高度 #

为了让偏移值更稳定，最好给#header设置一个固定高度，比如：

#header{
  display: flex;
  width: 100%;
  top: 0;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  background-color: white;
  height: 80px; /* 添加固定高度 */
}

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