滚动到带有固定标题的锚点，内容隐藏在标题后面，边距和顶部填充不起作用

Question

我正在使用 smoothscroll.js 来导航我的网站。在 Firefox 中，它会停在正确的锚点上，但在 Chrome 中，它会在第一次单击链接时传递该点，并将内容推送到顶部，将内容隐藏在页面后面。然后，如果您再次单击它，它就会正确对齐。我也在其他网站上看到过这些问题。很想看看其他人是否也有同样的问题。 Chrome 似乎忽略任何顶部填充或边距或定位（例如：top:20%;）。

Answer 1

我使用 Local Scroll (JQuery) 来做到这一点。

它允许您进行顶部偏移

$.localScroll({
    offset: -100
});

Answer 2

我发现这个解决方案非常简单且有用。您只需要添加 1 行 CSS 即可。

html {
    scroll-padding-top: 70px; /* height of sticky header, because the header hides the content when jumping to it */
}

原始答案：https://stackoverflow.com/a/56467997

Answer 3

这可能是由于新的 WordPress 主题使用了 header html5 元素。我将标题更改为 div，效果很好。