偏移 html 锚点以调整固定标头

javascript html css anchor offset

2022-08-29 22:02:21

我正在尝试清理锚点的工作方式。我有一个固定在页面顶部的标题，因此当您链接到页面中其他位置的锚点时，页面会跳转，因此锚点位于页面顶部，将内容保留在固定标题后面（我希望这有意义）。我需要一种方法将锚点从标题的高度偏移25px。我更喜欢HTML或CSS，但Javascript也是可以接受的。

答案 1

你可以在没有任何javascript的情况下使用CSS。

给你的锚点一个类：

<a class="anchor" id="top"></a>

然后，您可以通过使锚点成为块元素并相对定位它，将锚点定位在页面上实际显示的位置高或低。-250px 将锚点向上定位 250px

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

答案 2

我发现了这个解决方案：

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

这不会在内容中产生任何差距，锚链接效果非常好。