在HTML内部设置自定义定位点

我在一些帖子和文章中看到过这个话题，但它们并没有真正帮助我。但情况非常相似：滚动页面和页面顶部的粘性菜单栏（固定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>    
...

看看fiddle，看看它目前是如何工作的

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

我尝试过其他帖子中给出的解决方案，但都没有效果。例如，在锚点周围添加填充实际上会在文本中添加可见填充并创建空白；这不是我想要的。文本在视觉上应该是未经修改的

提前感谢您的提示和提示：-）

---

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

如何设置第一个h1的填充

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

---

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

CSS: #内容{ 填充顶部：50px；/*菜单高度*/ }

HTML:

菜单

如何使用Javascript和

窗口。滚动到

将页面滚动到您想去的地方？您可以找到元素的

offsetTop

，然后滚动到当前的

scrollX

和offsetTop+，无论标题有多高？

添加一个传统类并设置边距顶部值

Html

这里是Deml:

我想这样做

---

创建一个div，其

边距顶部：50px

&除了menu div，keep all都在container div中。

谢谢您的输入，我根据讨论找到了一个有效的解决方案。来自那里的暗示是“空锚”；在我最初的小提琴上，锚围绕着标题，这使我无法定位锚

更改为空锚点

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

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

---

我已更新以正确工作。（两件事：锚使用A1，…文本来显示它们的位置，但您可以清空它们。此外，我必须显式关闭

标记，以确保“位置：相对”正常工作。）

试试看，这是行不通的，因为填充会与其他内容一起滚动……这与Varon的第一个答案类似：填充/边缘也会滚动。在我的小提琴中，点击任何一个链接，你就会看到页面如何在菜单下跳跃。即使是你的编辑。和Selva和Davon的回答一样：不起作用。点击任何一个锚，菜单栏下的文本仍然会跳转。点击你提供的实时演示链接。然后点击“跳到a1”。文本现在被菜单栏覆盖，这不是我所要求的。我想要的是菜单栏及其右下方不包含文本。是否有一个CSS/HTML唯一的解决方案？但让我试试这个，它是有道理的。我用这个胡闹，但它有点乱。安装了一个onclick处理程序，然后该处理程序迭代“anchor”类的所有锚来选择目标锚。到目前为止，一切顺利。然后我很难找到锚的位置，它开始偏离切线。找到了一个工作正常的CSS解决方案。请注意：空锚不起作用，请改用

。警告：HTML5不支持

name

标记。改为使用全局id属性。

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

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

.nontop {
margin-top: 50px;
}

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

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