单页应用Header锚点跳转异常：Features模块滚动位置偏移问题

问题原因 #

固定定位的Header会占据视口顶部区域，原生锚点跳转默认将目标元素顶部对齐视口顶部，导致Features组件的内容被Header遮挡，出现滚动到中间位置的错觉。

解决方案 #

方案1：全局设置滚动内边距（推荐） #

在全局样式中给<html>标签设置scroll-padding-top，值等于Header的实际高度，所有锚点跳转都会自动预留顶部空间：

html {
  scroll-padding-top: 80px; /* 替换为你的Header实际高度 */
}

这个方案无需修改每个锚点目标元素，全局生效，最简洁。

方案2：给单个目标元素设置滚动外边距 #

如果只想针对Features组件生效，给其容器添加scroll-margin-top：

.features-container {
  scroll-margin-top: 80px; /* 替换为Header高度 */
}

直接在Features组件的样式中添加该属性即可。

方案3：自定义JS滚动逻辑 #

如果需要动态计算Header高度等灵活控制，可以在Header的锚点点击事件中手动处理滚动：

// 在NavigationBar组件中添加点击处理函数
const handleAnchorClick = (e, targetId) => {
  e.preventDefault();
  const targetElement = document.getElementById(targetId);
  if (targetElement) {
    const headerHeight = document.querySelector('.navbar').offsetHeight;
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  }
};

然后给锚点链接绑定这个事件：

<a href="#features" onClick={(e) => handleAnchorClick(e, 'features')}>Features</a>

以上方案都不需要给元素添加额外内边距或修改锚点父元素，符合你的需求。

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