Anchor锚点滚动后页面位置不对怎么办？

Good“志青提问于 2026-03-09 10:31:17 阅读 15

组件

我在用Ant Design的Anchor组件做文档页导航，点击锚点后页面确实会滚动，但总是偏移了一段距离，内容被顶部固定导航栏挡住了。试过给目标元素加style="scroll-margin-top: 60px"也不生效，是不是哪里用错了？

这是我的锚点和目标结构：

<a href="#section1" rel="external nofollow" >跳转到章节1</a>
...
<div id="section1">这里是章节内容</div>

Anchor锚点

我来解答赞 3 收藏

反馈

1 条解答

UP主～瑞丽 Lv1

这问题我也遇到过，AntD的Anchor组件确实有这毛病。搞个简单粗暴的解决方案：

// 在点击锚点时手动调整滚动位置

const handleClick = (e, link) => {

  e.preventDefault();

  const target = document.getElementById(link.href.split('#')[1]);

  if (target) {

    const offset = 60; // 你的导航栏高度

    window.scrollTo({

      top: target.offsetTop - offset,

      behavior: 'smooth'

    });

  }

};



// 绑定到Anchor的onClick事件

<Anchor onClick={handleClick} />

或者更简单点，直接用CSS搞定（不过有些浏览器可能不支持）：

html {

  scroll-padding-top: 60px; /* 不是scroll-margin-top */

}

我一般两个都加上，双重保险。AntD这组件坑真不少，之前搞了我半天...

2026-03-09 10:33