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

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

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

我创建了一个带有一些换行符的div，并给出了id，然后把我想要显示的代码放在下面。然后链接将带你到图像上方的空间，头部将不再碍事:

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

当然，您可以根据需要更改换行符的数量。 这对我来说非常有效，但不确定是否有任何问题，我仍在学习HTML。

我也有同样的问题。 我通过向锚元素添加一个类来解决这个问题，并将topbar高度作为padding-top值。

<h1><a class="anchor" name="barlink">Bar</a></h1>

我使用这样的CSS:

.anchor { padding-top: 90px; }

我之所以使用这种方法，是因为出于某种原因，其他提出的解决方案都不适合我。我保证我尽力了。

section {
   position: relative;
   border-top: 52px solid transparent; /* navbar height +2 */
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

section:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid transparent;
}

如果您愿意，可以将section替换为类。

来源:跳转链接和视口定位

在Firefox 45和Chrome 52上测试。 引导版本:3.3.7

对于那些不相信我的人，我善意地准备了一个jsfiddle的解决方案:解决方案

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

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

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

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