我有以下问题：
就像在 Facebook 上一样，我在页面顶部有一个始终可见的菜单栏 ( position: fixed;)。当我现在单击页面上的哈希链接（或在 url 中加载带有哈希的新页面）以跳转到页面上的某个元素时，浏览器总是将此元素滚动到页面的最顶部，这意味着之后，元素位于顶部菜单栏的后面。
我想添加一些 Javascript（jQuery 或普通 Javascript），它会自动向此滚动位置添加（负）偏移量，以便在单击链接或加载页面时链接元素位于顶部菜单栏的正下方. 但我不只是想将事件侦听器添加到处理此问题的所有链接。我还想要一个可行的解决方案，如果页面使用浏览器的地址栏在 url 中加载了一个哈希部分（或者当链接到在 url 末尾带有哈希的不同页面时）。
你能帮我解决这个问题吗？提前致谢！:)
实际上，我自己找到了一个对我有用的解决方案，只使用 css：
我在跳转链接指向的元素中添加了一个margin-top: -40px;and 。padding-top: 40px;这适用于所有主流浏览器：IE (7-9)、Firefox、Opera、Chrome 和 Safari。
唯一的问题：如果这个元素在浮动元素之后，负边距不起作用（意味着正填充变得可见）。如果有人知道解决方案/解决方法，请发表评论。到时我会更新我的帖子。谢谢！
我发现这种:before在 css 中添加 a 的方式似乎效果很好。
h2:before {
display: block;
content: " ";
margin-top: -285px;
height: 285px;
visibility: hidden;
}
更多内容请访问CSS Tricks 网站
例如，考虑适用于所有主要浏览器的D的bootDoc解决方案：
CSS（插入标题栏高度而不是40px）：
.symbol-target {
padding-top: 40px;
margin-top: -40px;
width: 1px; /* '0' will not work for Opera */
display: inline-block;
}
HTML：
<h3>
<span class="symbol-target" id="myTarget"> </span>
<a href="#myTarget">My text</a>
</h3>
真实页面示例：
std.array.uninitializedArray文档使用bootDoc
它不适用于 IE 6。
为了增加解决方案，我发现将显示设置为无解决了在浮动元素中使用时填充可见的问题。
所以：
.symbol-target {
padding-top: 40px;
margin-top: -40px;
width: 1px; /* '0' will not work for Opera */
display: hidden;
}
我还将这种样式作为一个空 div 包含在目标内容的正上方。
最适合我的事情是这样做：
如今在 2021 年，有一个很好的简单的 only-css 解决方案，其中包含:target和scroll-margin-top
:target {
scroll-margin-top: 100px;
}
它适用于所有主要浏览器
参考：
其他人都给出了 CSS 答案，但问题要求 JS
@assmmahmud 的答案只需稍加调整即可：gotoSpecificPosition 需要在第一条语句中更改为 offsetAnchor。
这对于为粘性标题调整所有 id 链接非常有帮助。
/* go to specific position if you load the page directly from address bar */
var navbarHeight = document.getElementById('mynavbar').clientHeight;
function offsetAnchor() {
if (window.location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - navbarHeight );
}
}
/* Captures click events on all anchor tag with a hash tag */
$(document).on('click', 'a[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
window.setTimeout(offsetAnchor, 0);
不幸的是（至少使用 Firefox）填充和边距在这里都没有帮助（将它们放在包含除菜单栏之外的所有内容的“主”div 上）；滚动到一个锚点总是把它放在页面的最顶部，固定元素是该死的。
我认为您将不得不遵循您最初的想法，但请记住，通过使用委托，您只能设置一个处理程序来处理菜单栏中的所有链接，包括动态添加的链接。
使用纯 javascript，您可以执行以下操作。它将侦听所有锚标记的单击事件并滚动到页面中您想要的位置（它使用 jquery）：
/* go to specific position if you load the page directly from address bar */
var navbarHeight = document.getElementById('mynavbar').clientHeight;
function gotoSpecificPosition() {
if (window.location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - navbarHeight );
}
}
/* Captures click events on all anchor tag with a hash tag */
$(document).on('click', 'a[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
window.setTimeout(offsetAnchor, 0);
上面的代码将处理所有的技巧。
h1, h2, h3, h4, h5, h6 {
scroll-margin-top: 80px;
}
从 React 文档中得到这个想法。
尝试在页面顶部放置一个填充以占据菜单栏后面的区域。像：（padding-top:80px;而不是 80px 你应该把你的菜单栏的高度）。