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

Question

有一些类似的帖子(例如 offsetting an html anchor to adjust for fixed header)，但这些解决方案不适用于我的特定情况。

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

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

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

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

这里有一个 jsFiddle 说明我在说什么:http://jsfiddle.net/aweber9/GbNFv/

谢谢。

Answer 1

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

jsFiddle

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