在我的纯粹主义思想中，这感觉有点俗气，但作为css的唯一解决方案，你可以使用:target选择器为活动锚定元素添加填充:

html, body {height:100%; min-height:100%; margin:0;} body {min-height:200%;} header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;} header a {color:#fff;} section {padding:30px; margin:20px;} section:first-of-type, section:target {padding-top:130px;} <header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header> <section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section> <section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section> <section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

通过添加滚动填充顶部属性来解决这个问题，只需将此代码添加到您的CSS文件中，就可以看到神奇的效果。

对于动态高度和间隙变量

html {   
    --headerHeight:79px;   
    --gap:40px;   
    scroll-padding-top: calc(var(--headerHeight) + var(--gap)); 
}

对于固定间隙值

html { 
    scroll-padding-top: 120px; 
}

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

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

我使用这样的CSS:

.anchor { padding-top: 90px; }

我认为最干净的方法是:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

虽然一些建议的解决方案适用于同一页面内的片段链接(=散列链接)(比如向下滚动的菜单链接)，但我发现当你想使用来自其他页面的片段链接时，它们都不适用于当前的Chrome。

因此，从头开始调用www.mydomain.com/page.html#foo不会抵消当前Chrome中任何给定的CSS解决方案或JS解决方案的目标。

还有一个jQuery错误报告描述了这个问题的一些细节。

解决方案

到目前为止，我发现唯一一个真正在Chrome中工作的选项是JavaScript，不称为onDomReady，但有延迟。

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

总结

没有JS的延迟解决方案可能在Firefox, IE, Safari中工作，但在Chrome中行不通。

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