我找到了这个解决方案:

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

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

你可以不用js也不用修改html。它´s css-only。

a[id]::before {
    content: '';
    display: block;
    height: 50px;
    margin: -30px 0 0;
}

这将在每个带id的a-tag之前附加一个伪元素。调整值以匹配头部的高度。

你可以使用a[name]:not([href]) css选择器在没有ID的情况下实现这一点。这仅仅是查找有名称且没有href的链接，例如<a name="anc1"></a>

一个示例规则可能是:

a[name]:not([href]){
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

如果您的锚是一个表元素或在一个表(行或单元格)中，上述方法就不能很好地工作。

我不得不使用javascript和绑定到窗口hashchange事件来解决这个问题(演示):

function moveUnderNav() {
    var $el, h = window.location.hash;
    if (h) {
        $el = $(h);
        if ($el.length && $el.closest('table').length) {
            $('body').scrollTop( $el.closest('table, tr').position().top - 26 );
        }
    }
}

$(window)
    .load(function () {
        moveUnderNav();
    })
    .on('hashchange', function () {
        moveUnderNav();
    });

*注意:hashchange事件并非在所有浏览器中都可用。

对于同样的问题，我使用了一个简单的解决方案:在每个锚上放置40px的填充顶部。

这是我们在网站上使用的解决方案。调整headerHeight变量，无论你的头部高度是什么。将js-scroll类添加到应该在单击时滚动的锚。

// SCROLL ON CLICK
// --------------------------------------------------------------------------
$('.js-scroll').click(function(){
    var headerHeight = 60;

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
    }, 500);
    return false;
});