html - 在 HTML 中设置自定义 anchor

Question

我在帖子中看到了这个主题 here和 here ，但他们并没有真正帮助我。不过情况非常相似:页面顶部有一个滚动页面和一个粘性菜单栏(固定 div)， anchor 分散在长滚动文本中。

类似这样的 HTML:

<a name="hd1" class="anchor"><h1>Heading Foo</h1></a>
<p>this is some text, and a lot of it
...
<a href="#hd1">jump to Heading Foo</a>
...
<a name="hdx" class="anchor"><h1>Heading Bla</h1></a>
<p>and then there is more text
...
<a href="#hdx">jump to Heading Bla</a>    
...

一些 CSS 目前是空的，因为我仍然只是偶然发现了这个问题

.anchor {
  color: green;
} ​

看看this fiddle 看看它现在是如何工作的。

现在，每当我单击一个链接时，它都会将我带到 anchor 。 (耶!)唉，这也意味着现在位于页面顶部的 anchor 被粘性菜单覆盖了。 (不!)如果它能在粘性菜单下方显示就太好了。

我已经尝试了其他帖子中给出的解决方案，但无济于事。例如，在 anchor 周围添加填充实际上会在文本中添加可见的填充并创建空白；这不是我想要的。文本应该在视觉上显示为未修改。

在此先感谢提示和技巧:-)

编辑:我应该说得更清楚一点。我不需要页面顶部的空间。我确实需要每个 anchor 都在菜单栏下方。试试我原来的 fiddle ，然后单击 anchor :您将看到它们是如何定位的，以便它们被菜单栏覆盖。

Answer 1

如何为第一个 h1 设置填充？

​h1:first-child {
    padding-top:50px;
}