官方引导采用答案:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden; 
}

学分

走

虽然一些建议的解决方案适用于同一页面内的片段链接(=散列链接)(比如向下滚动的菜单链接)，但我发现当你想使用来自其他页面的片段链接时，它们都不适用于当前的Chrome。

因此，从头开始调用www.mydomain.com/page.html#foo不会抵消当前Chrome中任何给定的CSS解决方案或JS解决方案的目标。

还有一个jQuery错误报告描述了这个问题的一些细节。

解决方案

到目前为止，我发现唯一一个真正在Chrome中工作的选项是JavaScript，不称为onDomReady，但有延迟。

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

总结

没有JS的延迟解决方案可能在Firefox, IE, Safari中工作，但在Chrome中行不通。

我在这里和其他地方的许多答案都遇到了很多麻烦，因为我的书签锚是FAQ页面中的部分标题，所以抵消标题并没有帮助，因为其余的内容只是停留在原地。所以我想我应该发帖。

我最终做的是几个解决方案的组合:

CSS: .bookmark { margin-top: -120 px; padding-bottom: 120 px; 显示:块; ｝

其中“120px”是你的固定标题高度(可能加上一些边距)。

书签链接HTML: <a href="#01">你的常见问题是什么来着?< / > 书签内容HTML: <span class="bookmark" id="01"></span> 你的常见问题是什么来着?< / h3 > <p>一些常见问题的文本，后面跟着 < p >…</p>

这个解决方案的优点是span元素不仅隐藏，而且本质上是折叠的，不会填充您的内容。

我不能对这个解决方案有太多的功劳，因为它来自不同的资源，但它最适合我的情况。

你可以在这里看到实际的结果。

你现在可以使用scroll-margin-top，它被广泛采用。

只需将以下CSS添加到你想要滚动到的元素:

.element {
  scroll-margin-top: 2em;
}

你可以试试这个:

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

将顶部填充值设置为头部的实际高度。这将在你的标题顶部引入一个轻微的额外间隙，但它只会在用户跳转到锚点然后向上滚动时才可见。我现在已经为我的网站制定了这个解决方案，但它只在页面顶部显示一个固定的小栏，没有太高。

我使用@Jpsy的答案，但出于性能原因，我只在URL中存在散列时设置计时器。

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

function delayedFragmentTargetOffset(){
      var offset = $(':target').offset();
      if(offset){
          var scrollto = offset.top - 80; // minus fixed header height
          $('html, body').animate({scrollTop:scrollto}, 0);
          $(':target').highlight();
      }
  };