我使用这种方法:

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

它在每个目标之前添加一个隐形元素。支持IE8+。

这里有更多的解决方案: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

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

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/Safari/Firefox，你可以添加一个display: block，并使用负边距来补偿偏移量，如下所示:

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

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

如果你不能或不想设置一个新类，在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);

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

这段代码应该可以达到目的。将标题栏的高度替换为45px。

编辑:如果使用jQuery是一个选项，我也成功地使用jQuery。带有偏移值设置的localScroll。偏移量选项是jQuery的一部分。scrollTo, jQuery。localScroll是在此基础上构建的。这里有一个演示:http://demos.flesler.com/jquery/scrollTo/(第二个窗口，在'offset'下)

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

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

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