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

HTML:

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

CSS:

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

用这个:

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

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

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

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

CSS中:

.vspace { height: 40px;}

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

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

从这个链接中给出的答案中借用一些代码(没有指定作者)，你可以包括一个很好的平滑滚动效果到锚，同时让它停在锚上方的-60px处，很好地适合固定引导导航条的下方(需要jQuery):

$(".dropdown-menu a[href^='#']").on('click', function(e) {
   // prevent default anchor click behavior
   e.preventDefault();

   // animate
   $('html, body').animate({
       scrollTop: $(this.hash).offset().top - 60
     }, 300, function(){
     });
});

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

我的解决方案结合了CMS的目标和前选择器。其他技术不考虑锚中的文本。调整高度和负边距到你需要的偏移量…

:target::before {
    content: '';
    display: block;
    height:      180px;
    margin-top: -180px;
}