我在每个h1元素之前添加了40px-height .vspace元素。

<div class="vspace" id="gherkin"></div>
<div class="page-header">
  <h1>Gherkin</h1>
</div>

CSS中:

.vspace { height: 40px;}

它工作得很好，空间也没有堵塞。

改变位置属性的解决方案并不总是可能的(它会破坏布局)，因此我建议这样做:

HTML:

<a id="top">Anchor</a>

CSS:

#top {
    margin-top: -250px;
    padding-top: 250px;
}

用这个:

<a id="top">&nbsp;</a>

为了减少重叠，设置font-size为1px。空锚将无法在某些浏览器中工作。

再加上Ziav的回答(感谢Alexander Savin)，我需要使用老式的<a name="…">…</a> as we're using <div id="…">…</div>用于代码中的另一个目的。我在使用display: inline-block时遇到了一些显示问题——每个<p>元素的第一行都略微右缩进(在Webkit和Firefox浏览器上都是如此)。我最终尝试了其他的显示值和display: table-标题对我来说非常适合。

.anchor {
  padding-top: 60px;
  margin-top: -60px;
  display: table-caption;
}

不要使用固定位置的导航条，它覆盖了页面的其余内容(整个页面主体都是可滚动的)，而是考虑使用静态导航条的不可滚动主体，然后将页面内容放在绝对位置的可滚动div中。

也就是说，有这样的HTML…

<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
  <p>Bla bla bla</p>
  <p>Yadda yadda yadda</p>
  <p>Mary had a little lamb</p>
  <h2 id="stuff-i-want-to-link-to">Stuff</h2>
  <p>More nonsense</p>
</div>

．.． 和CSS是这样的:

.static-navbar {
  height: 100px;
}
.scrollable-content {
  position: absolute;
  top: 100px;
  bottom: 0;
  overflow-y: scroll;
  width: 100%;
}

然而，这种方法有一个显著的缺点，那就是当页面标题中的元素被聚焦时，用户将无法使用键盘滚动页面(例如，通过向上和向下箭头或page up和page down键)。

下面是一个演示这个操作的JSFiddle。

用可链接id来提供导航栏高度的隐藏span标签怎么样?

#head1 {
  padding-top: 60px;
  height: 0px;
  visibility: hidden;
}


<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>

这里是小提琴:http://jsfiddle.net/N6f2f/7

你可以只使用CSS而不需要任何javascript。

给你的锚一个类:

<a class="anchor" id="top"></a>

然后，通过将锚定位为块元素并相对定位，您可以将锚定位在比它在页面上实际出现的位置更高或更低的偏移量。-250px将锚点向上定位250px

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}