jquery - 使用固定标题偏移锚链接

Question

有一些类似的帖子（例如，偏移 html 锚以调整固定标题），但这些解决方案不适用于我的特定情况。

我正在使用 jQuery 来填充目录，特别是这里描述的方法：http: //css-tricks.com/automatic-table-of-contents/。它在文章中搜索 h2 标签，然后创建锚链接。

问题是我使用的是固定标题。当我单击这些锚链接之一时，目标 h2位于标题下方。我正在使用的一种临时解决方案是：

h2:target{
  padding-top:[header-height];
}

这一直有效，直到您向上滚动，并且内容中间有一个巨大的差距。你们对如何抵消这些锚链接以解释标题有什么想法吗？我想尽可能地保持 HTML 的语义。任何帮助，将不胜感激。

这是我正在谈论的内容的 jsFiddle：http: //jsfiddle.net/aweber9/GbNFv/

谢谢。

Answer 1

您可以包括padding-top然后使用负数margin-top来平衡它。

jsFiddle

h2 {
    padding-top: 70px;
    margin-top: -70px;
}

Answer 2

@Daniel Imms 解决方案很好，但如果标题有上边距，它将被这个负上边距重置。我找到了一个使用伪类的解决方案：

h2:before {
    display: block;
    content: " ";
    height: 20px;  /* Give height of your fixed element */
    margin-top: -20px; /* Give negative margin of your fixed element */
    visibility: hidden;
}

因此，这不会重置原始上边距。

Answer 3

好。我也有这个问题。我可以在这里找到的最好和最快的解决方案是在您的样式标签或 CSS 文件中使用以下代码片段。

html
{
  scroll-padding-top: 12vw; /* height of sticky header */
}

Answer 4

我发现这两个答案一起提供了跨多个浏览器的最强大的解决方案。我将两者都包含在我的 CSS 中...

a[name]:not([href]) {
    padding-top: 90px;
    margin-top: -90px;
}
a[name]:not([href]):before {
    display: block;
    content: " ";
    padding-top: 90px;
    margin-top: -90px;
    visibility: hidden;
}

Answer 5

这对我有用。

:target {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}