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

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

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

我发现我必须同时使用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>
...

你可以试试这个:

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

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

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

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

上面的答案创建了一个60px高的标签，屏蔽了其他因此停止工作的链接。我发现这个方法没有副作用。

<a class="anchor" id="top"></a>

a.anchor {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

对于Chrome/Safari/Firefox，你可以添加一个display: block，并使用负边距来补偿偏移量，如下所示:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

参见示例http://codepen.io/swed/pen/RrZBJo

这就是当你点击导航时，我如何让它最终到达正确的位置。我为导航单击添加了一个事件处理程序。然后你可以使用“scrollBy”来向上移动偏移量。

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });