html - ID 不正确的 anchor URL，因为固定 header

Question

我在我们的网站上使用高度为 58px 的固定标题。

现在我想链接到页面上的 anchor ，但这不起作用，因为 anchor 的起点在标题后面。

我不能给特定的 anchor 部分一个边距或填充到顶部，因为那显示起来很难看。

我使用类似的东西:

<a href="#test">Test link</a>

和:

<p id="test" class="anchor">

如何更改 anchor 的起点，使其在标题之后开始。

请参阅此 JSFiddle:https://jsfiddle.net/vrLs0wkk/

Answer 1

简单。在您的目标 p 元素中添加一个新元素，并为其赋予 id 属性:

<p>
    <span id="test" class="anchor-point"></span>
    ...
</p>

现在将您的 p 元素设置为具有相对定位:

p {
    position: relative;
}

然后将新的 .anchor-point 元素设置为位于 p 元素顶部上方的某个位置，并为其赋予 visibility: hidden使其完全不可见:

.anchor-point {
    position: absolute;
    top: -70px;
    visibility: hidden;
}

JSFiddle demo .