刚刚发现了另一个纯CSS解决方案，对我来说就像一个魅力!

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

在这个网站上找到!

我发现我必须同时使用muttenxd和Badabam的CSS解决方案，因为第一个在Chrome中不起作用，第二个在Firefox中不起作用:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

你可以用jQuery做到这一点:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

官方引导采用答案:

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

学分

走

如果你不能或不想设置一个新类，在CSS的:target伪类中添加一个固定高度的::

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

或者使用jQuery相对于:target滚动页面:

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

我在这里和其他地方的许多答案都遇到了很多麻烦，因为我的书签锚是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元素不仅隐藏，而且本质上是折叠的，不会填充您的内容。

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

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