我遇到了同样的问题，最终手动处理点击事件，如下所示:

$('#mynav a').click(() ->
  $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 40
  }, 200
  return false
)

当然，滚动动画是可选的。

我遇到了同样的问题，最终手动处理点击事件，如下所示:

$('#mynav a').click(() ->
  $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 40
  }, 200
  return false
)

当然，滚动动画是可选的。

我在一个TYPO3网站上遇到了这个问题，其中所有的“内容元素”都用类似这样的东西包装:

<div id="c1234" class="contentElement">...</div>

我改变了渲染，所以它是这样渲染的:

<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>

这个CSS:

.anchor{
    position: relative;
    top: -50px;
}

固定的topbar是40px高，现在锚再次工作，并在topbar下10px开始。

这种技术的唯一缺点是你不能再使用:target。

用可链接id来提供导航栏高度的隐藏span标签怎么样?

#head1 {
  padding-top: 60px;
  height: 0px;
  visibility: hidden;
}


<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>

这里是小提琴:http://jsfiddle.net/N6f2f/7

我找到了这个解决方案:

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

这不会在内容和锚链接中产生任何差距，效果非常好。

这是受到Shouvik回答的启发-与他的概念相同，只是固定头的大小没有硬编码。只要你的固定头在第一个头节点中，这应该“正常工作”。

/*jslint browser: true, plusplus: true, regexp: true */

function anchorScroll(fragment) {
    "use strict";
    var amount, ttarget;
    amount = $('header').height();
    ttarget = $('#' + fragment);
    $('html,body').animate({ scrollTop: ttarget.offset().top - amount }, 250);
    return false;
}

function outsideToHash() {
    "use strict";
    var fragment;
    if (window.location.hash) {
        fragment = window.location.hash.substring(1);
        anchorScroll(fragment);
    }
}

function insideToHash(nnode) {
    "use strict";
    var fragment;
    fragment = $(nnode).attr('href').substring(1);
    anchorScroll(fragment);
}

$(document).ready(function () {
    "use strict";
    $("a[href^='#']").bind('click',  function () {insideToHash(this); });
    outsideToHash();
});