在 HTML 中设置自定义锚点

Question

我在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">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 看看它现在是如何工作的。

现在，每当我单击链接时，它都会将我带到锚点。 （耶！）唉，这也意味着现在位于页面顶部的锚点被粘性菜单覆盖。 （不！）如果它能够在下方显示粘性菜单，那就太好了。

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

提前感谢您的提示和提示 :-)

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

Answer 1

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

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

Answer 2

感谢您的意见，我根据this 讨论找到了一个可行的解决方案。那里的提示是“空锚”；在我原来的小提琴上，锚点包围了标题，这使我无法定位锚点。

改为空锚

<a name="hdx" class="anchor">&nbsp;</a><h1>Heading Bla</h1>

允许我在不影响任何（可见）文本流的情况下移动页面上的锚点。所以锚的 CSS 现在变成了

.anchor {
  position: relative;
  top: -35px;  /* depending on the size of the sticky menu */
}

这样，标题的锚点位于标题的上方，并且跳转到该锚点会导致标题显示在菜单栏下方。

我已更新 the fiddle 以正常工作。 （两件事：锚使用 A1，.. 文本来显示它们的位置，但您可以清空它们。另外，我必须明确关闭 <p> 标签以确保“位置：相对”工作正常。）

Answer 3

创建一个容器 div 来保存其余数据并设置 padding-top:50px;

CSS： ＃内容{ padding-top:50px;/* 菜单高度 */ }

HTML：

<div id="menu">Menu</div>
<div id="contents">
<!-- data goes here -->
</div>

Answer 4

使用 Javascript 和 window.scrollTo 将页面滚动到您想去的地方怎么样？您可以找到元素的offsetTop，然后滚动到当前的scrollX 和offsetTop + 你的标题有多高？

Answer 5

添加额外的一类并设置该边距顶部值

HTML

<div id="menu">Menu</div>
 <div class="nontop">
  //-- some thing here
</div>

CSS

.nontop {
margin-top: 50px;
}

这里是 Deml：fiddle

Answer 6

Live demo 想做这样的事。

使用margin-top:50px; 创建一个 div 并保持所有内容都在容器 div 中，除了菜单 div。