我发现处理这个问题的最好方法是(用固定的元素高度替换65px):

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

如果你不喜欢使用目标选择器，你也可以这样做:

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

注意:如果目标元素的背景色与父元素的背景色不同，这个例子将不起作用。 例如:

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

在这种情况下，我的目标元素的绿色将覆盖65px的父元素红色。 我没有找到任何纯CSS解决方案来处理这个问题，但如果你没有另一个背景色，这个解决方案是最好的。

我使用这种方法:

/* 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/

添加一个带有“paddingtop”的类，这样它就可以工作了;)

<h1><a class="paddingtop">Bar</a></h1>

对于css，你有:

.paddingtop { 
   padding-top: 90px; 
}

我发现处理这个问题的最好方法是(用固定的元素高度替换65px):

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

如果你不喜欢使用目标选择器，你也可以这样做:

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

注意:如果目标元素的背景色与父元素的背景色不同，这个例子将不起作用。 例如:

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

在这种情况下，我的目标元素的绿色将覆盖65px的父元素红色。 我没有找到任何纯CSS解决方案来处理这个问题，但如果你没有另一个背景色，这个解决方案是最好的。

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

var offset = 90;

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

我已经很容易地使用CSS和HTML，使用上面提到的“锚:之前”方法。我认为它是最好的，因为它不会在你的divs之间产生大量的填充。

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

这似乎并不适用于页面上的第一个div，但你可以通过添加填充到第一个div。

#anchor-one{padding-top: 60px;}

这里有一个工作小提琴:http://jsfiddle.net/FRpHE/24/