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

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

我使用这样的CSS:

.anchor { padding-top: 90px; }

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

var offset = 90;

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

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

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

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

我使用@Jpsy的答案，但出于性能原因，我只在URL中存在散列时设置计时器。

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

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

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

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

在这个网站上找到!

使用jQuery的最小侵入性方法:

链接:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

内容:

<h3 id="my-anchor-1">Here is Anchor 1</a>

脚本:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

通过将锚链接类分配给链接，其他链接(如手风琴或制表符控件)的行为不会受到影响。

这个问题不需要javascript，但另一个更受欢迎的问题因为这个问题而关闭了，我无法回答。