React+Tailwind目录锚点被粘性头部遮挡的解决方案咨询

你遇到的问题是浏览器默认锚点跳转会将目标元素顶部对齐视口顶部，但固定在顶部的100px高Header会挡住内容，这里有两种实用解决方案：

方法一：CSS scroll-margin-top（推荐，最简实现） #

直接给所有锚点目标区块添加scroll-margin-top样式，值等于Header的高度100px，让浏览器滚动时自动预留顶部空间。

如果用Tailwind CSS，直接给目标元素加类名：

// 假设你的文章区块结构是这样
<div id={item.id} className="scroll-mt-[100px]">
  {/* 文章内容 */}
</div>

不需要修改你现有的目录Link代码，浏览器会自动处理滚动偏移，完美适配原生锚点跳转逻辑。

方法二：自定义滚动逻辑（灵活控制） #

如果需要更灵活的控制（比如平滑滚动、动态Header高度），可以阻止默认锚点跳转，用JS手动计算滚动位置：

1. 抽离点击处理函数 #

在组件里定义一个复用的处理函数：

const handleAnchorJump = (e, targetId, index) => {
  e.preventDefault(); // 阻止浏览器默认锚点行为
  setSelectedIndex(index);
  
  const targetElement = document.getElementById(targetId);
  if (!targetElement) return;
  
  const headerHeight = 100;
  // 计算目标位置：元素顶部偏移量减去Header高度
  const scrollPosition = targetElement.offsetTop - headerHeight;
  
  window.scrollTo({
    top: scrollPosition,
    behavior: 'smooth' // 可选，开启平滑滚动
  });
};

2. 修改目录Link的调用 #

把原来的Link onClick事件替换成这个函数，同时简化选中状态的样式逻辑：

<ol className="list-decimal pl-5">
    {blogOne[0].tableList.map((item, index) => {
        return (
            <li
              key={index}
              className={`${index === selectedIndex ? "text-blue-500 font-Bold" : ""} py-2`}
             >
               <Link
                 className={`${index === selectedIndex ? "text-blue-500 font-guruWayBold" : ""}`}
                 href={`#${item.id}`}
                 onClick={(e) => handleAnchorJump(e, item.id, index)}
               >
                 {item.title}
               </Link>
            </li>
        );
    })}
</ol>

这样不仅解决了遮挡问题，还能统一选中状态的样式逻辑，减少重复代码。

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