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

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

@AlexanderSavin的解决方案在WebKit浏览器中对我来说很棒。

另外，我不得不使用:target伪类，它将样式应用到选定的锚来调整FF, Opera和IE9中的填充:

a:target {
  padding-top: 40px
}

注意，这种风格不适合Chrome / Safari，所以你可能不得不使用css-hacks，条件注释等。

我还想注意到，Alexander的解决方案工作，因为目标元素是内联的。如果你不想要链接，你可以简单地改变显示属性:

<div id="myanchor" style="display: inline">
   <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>

我遇到了同样的问题，最终手动处理点击事件，如下所示:

$('#mynav a').click(() ->
  $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 40
  }, 200
  return false
)

当然，滚动动画是可选的。

你可以使用a[name]:not([href]) css选择器在没有ID的情况下实现这一点。这仅仅是查找有名称且没有href的链接，例如<a name="anc1"></a>

一个示例规则可能是:

a[name]:not([href]){
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

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

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

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

  vertical-align: top;