Question

有一些类似的帖子（例如offsetting an html anchor to adjust for fixed header），但这些解决方案对我的特定情况不起作用。

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

问题是我使用的是固定标头。当我单击其中一个锚链接时，目标h2在标题下面。我正在使用的一个临时解决方案是：

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

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

以下是我正在谈论的内容：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中......

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 4

这对我有用。

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

Answer 5

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

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

使用固定标题偏移锚点链接

5 个答案: