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小提琴，看看它现在是如何运作的。

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

，那就太好了。

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

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

Answer 1

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

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

Answer 2

感谢您的投入，我找到了一个基于this讨论的工作解决方案。那里的提示是＆＃34;空锚＆＃34 ;;在我原来的小提琴上，锚定了标题，这阻止了我定位锚点。

更改为空锚

<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>标签以确保＆＃34;位置：relative＆＃34;正常工作。）

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

添加额外的一个类并设置该margin-top值

Html

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

的CSS

.nontop {
margin-top: 50px;
}

这里是魔鬼：fiddle

Answer 6

Live demo 想要这样做。

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

在HTML中设置自定义锚点

6 个答案: