从2021年4月起，有一个非黑客的、完全跨浏览器的解决方案:

h1 {
  scroll-margin-top: 50px
}

它是CSS Scroll Snap规范的一部分。可以在所有现代浏览器上运行。(更多信息，请参阅MDN页面关于scroll-margin-top, scroll-padding-top)

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

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

我使用这样的CSS:

.anchor { padding-top: 90px; }

一个非常简单的CSS答案是把它放在你的样式表的顶部:

a{padding-top: 90px;}
a:link{padding-top: unset;}

第一种样式管理所有锚标记，第二种样式使用超链接锚标记。

注意:这目前适用于Firefox和Edge，但不适用于Chrome。

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

对于动态高度和间隙变量

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

对于固定间隙值

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

使用这个脚本

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});

我没有看到简单地使用:target作为一个选项列出。我发现

:目标{margin-top: -100px;padding-top: 100 px;｝

似乎在提供的场景中工作。:target也兼容所有现代浏览器。https://caniuse.com/?search=%3Atarget