在HTML中设置自定义锚点

概述我已经在帖子 here和 here中看到了这个话题,但它们并没有真正帮助我.情况非常相似：页面顶部的滚动页面和粘性菜单栏(固定div),锚点分散在长滚动文本中. 像这样的HTML： <a name="hd1" class="anchor"><h1>Heading Foo</h1></a><p>this is some text, and a lot of it...<a href="#hd1 我已经在帖子 here和 here中看到了这个话题,但它们并没有真正帮助我.情况非常相似：页面顶部的滚动页面和粘性菜单栏(固定div),锚点分散在长滚动文本中.

像这样的HTML：

<a name="hd1" ><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" ><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小提琴,看它目前是如何运作的.

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

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

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

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

解决方法 如何设置第一个h1的填充？

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

总结

以上是内存溢出为你收集整理的在HTML中设置自定义锚点全部内容，希望文章能够帮你解决在HTML中设置自定义锚点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。