由于固定标头，ID不正确的锚点网址

Question

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

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

我不能给特定的锚点部分留出边距或填充到顶部，因为这显示为难看。

我用的是：

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

和

<p id="test" class="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

Answer 2

把它放在你的CSS中。

:target:before {
    content: "";
    display: inline-block;
    height: 250px;
    margin: -180px 0 0;
}

根据您的喜好改变身高。