Javascript 为所有哈希链接/调用向滚动位置添加自动偏移

我有以下问题：

就像在Facebook上一样，我在页面顶部有一个始终可见的菜单栏（

position:fixed；

）。现在，当我单击页面上的散列链接（或加载url中包含散列的新页面）以跳转到页面上的某个元素时，浏览器总是将该元素滚动到页面顶部，这意味着该元素随后位于顶部菜单栏后面

我想添加一些Javascript（jQuery或普通Javascript），自动将（负）偏移量添加到此滚动位置，以便在单击链接或加载页面时，链接元素位于顶部菜单栏的正下方。但我并不只是想将事件监听器添加到处理此问题的所有链接中。我还想要一个有效的解决方案，如果页面使用浏览器的地址栏加载url中的散列部分（或者链接到url末尾有散列的其他页面）

你能帮我做这个吗？提前感谢！：）

问候,，

---

René

尝试在页面顶部添加填充，以占据菜单栏后面的区域。类似于：

paddingtop:80px

（而不是80px，你应该把菜单栏的高度放进去）。

不幸的是（至少使用Firefox）填充和边距在这里都没有帮助（把它们放在“main”div中，包含菜单栏以外的所有内容）；滚动到锚点总是把它放在页面的最顶端，固定的元素会被诅咒

---

我认为您必须遵循您最初的想法，但请记住，通过使用委派，您可以只设置一个处理程序来处理菜单栏中的所有链接，包括动态添加的链接。

事实上，我自己找到了一个适合我的解决方案，仅使用css：

我添加了一个

页边距顶部：-40px和
填充顶部：40px到跳转链接所指向的元素。这适用于所有主要浏览器：IE（7-9）、Firefox、Opera、Chrome和Safari

唯一的问题是：如果该元素位于浮动元素之后，则负边距不起作用（意味着正填充变为可见）。如果有人知道这方面的解决方案/解决方法，请发表评论。然后我会更新我的帖子。谢谢大家!
 > P>作为一个例子，考虑在所有主要浏览器中工作的解决方案：

CSS（插入标题栏高度，而不是
40px
）：

HTML:



真实页面示例：


注:
它不适用于IE 6。
要添加到解决方案中，我发现将显示设置为“无”解决了在浮动元素中使用填充时可见的问题

因此：

我还将此样式作为空div包含在目标内容的正上方。
最适合我的方法是：

将指定的ID（URL中所需的内容）提供给所需元素中的其他元素
将新元素设为绝对元素，并将其移动到所需元素上方X像素处，其中X是固定标题的高度
我发现这种在css中添加
：before
的方法似乎很有效

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

更多信息参见
使用纯javascript，您可以执行以下操作。它将侦听所有锚标记的单击事件，并滚动到页面中所需的位置（使用jquery）：

上面的代码将处理所有技巧
 其他人都给出了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);

h1、h2、h3、h4、h5、h6{
滚动边距顶部：80px；
}

从React docs中得到了这个想法。
您有JSFIDLE要显示吗？在滚动到的元素顶部添加填充怎么样？这不起作用。但实际上我发现了一个只使用css的解决方案。我在跳转链接指向的元素中添加了一个负边距顶部和一个正填充顶部（相同数量的像素）。唯一的问题是：如果该元素位于浮动元素之后，则负边距不起作用（意味着正填充变为可见）。你有解决方法的想法吗？嗯，它有点将元素移到它前面的元素的“后面”，并在元素的顶部添加一个内部“距离”（填充）。这样，浏览器会认为元素的位置比实际可见内容早40px（更靠近页面顶部）。这是有效的，我发现的唯一问题是，元素绝对位于该元素内，需要根据添加的填充调整其位置。这是我的最爱。很好，简单，感觉不那么“黑”。
display:hidden
不是一件事这对我来说是一个完美的解决方案。我用这些参数创建了一个新类，然后将一个自定义ID和这个新类应用于我页面上的元素，它就像一个符咒。非常感谢。我最初的问题还说“但我不想把事件监听器添加到处理此问题的所有链接中。”，但无论如何，感谢您提供的扩展解决方案！）
.symbol-target {
    padding-top: 40px;
    margin-top: -40px;
    width: 1px; /* '0' will not work for Opera */
    display: hidden;
}

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

/* 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);

/* 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);