如何在html中定义锚点,在HTML中设置自定义锚点

我已经在帖子

here和

here中看到了这个话题,但它们并没有真正帮助我.情况非常相似：页面顶部的滚动页面和粘性菜单栏(固定div),锚点分散在长滚动文本中.

像这样的HTML：

Heading Foo

this is some text, and a lot of it

...

jump to Heading Foo

...

Heading Bla

and then there is more text

...

jump to Heading Bla

...

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

.anchor {

color: green;

} ​

看看this小提琴,看它目前是如何运作的.

现在,每当我点击一个链接,它就会把我带到锚点. (是的！)唉,这也意味着现在位于页面顶部的锚点被粘滞菜单所覆盖. (不！)如果它会显示在粘性菜单下面会很棒.

我尝试过其他帖子中提供的解决方案无济于事.例如,在锚点周围添加填充实际上会在文本中添加可见的填充并创建空白空间;这不是我想要的.文本应该在视觉上看起来没有修改.

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

编辑：我应该更清楚一点.我不需要页面顶部的空间.我确实需要每个锚点都在菜单栏下面.尝试我的原始小提琴,然后单击锚点：您将看到它们的位置,以便它们被菜单栏覆盖.