正如@moeffju所建议的，这可以通过CSS实现。我遇到的问题(我很惊讶我没有看到讨论)是用填充或透明边框重叠之前的元素的技巧，可以防止在这些部分的底部进行悬停和单击操作，因为下面的部分在z轴次序中更高。

我发现的最好的解决办法是把部分内容放在一个div，是在z-index: 1:

// Apply to elements that serve as anchors
.offset-anchor {
  border-top: 75px solid transparent;
  margin: -75px 0 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

// Because offset-anchor causes sections to overlap the bottom of previous ones,
// we need to put content higher so links aren't blocked by the transparent border.
.container {
  position: relative;
  z-index: 1;
}

对于同样的问题，我使用了一个简单的解决方案:在每个锚上放置40px的填充顶部。

用可链接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

这对我来说很管用:

[id]::before {
  content: '';
  display: block;
  height:      75px;
  margin-top: -75px;
  visibility: hidden;
}

我也在寻找这个问题的解决方案。对我来说，这很简单。

我有一个列表菜单与所有的链接:

<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>

下面是标题。

<h3>one</h3>
<p>text here</p>

<h3>two</h3>
<p>text here</p>

<h3>three</h3>
<p>text here</p>

<h3>four</h3>
<p>text here</p>

现在，因为我在页面顶部有一个固定的菜单，我不能让它去我的标签，因为它会在菜单后面。

相反，我在标签中放入了一个span标签，并带有正确的id。

<h3><span id="one"></span>one</h3>

现在使用2行CSS来正确定位它们。

h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}

更改顶部值以匹配固定标题的高度(或更多)。 现在我认为这也适用于其他元素。

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