受Alexander Savin启发的纯css解决方案:

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

如果目标仍然不在屏幕上，你可以选择添加以下内容:

  vertical-align: top;

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

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

<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;}

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

受Alexander Savin启发的纯css解决方案:

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

如果目标仍然不在屏幕上，你可以选择添加以下内容:

  vertical-align: top;

这对我来说很管用:

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

再加上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;
}

正如@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;
}