javascript - 单击 anchor 时下推页面

Question

我有一个包含一些博客元素的页面。这些元素以 anchor 开头，有时我直接使用 #my-item 链接到它们。

问题是，我在顶部有一个固定的菜单，该菜单现在覆盖了标题，因为 anchor 链接占据了我浏览器的顶部。

是否可以将其向下推(例如 100 像素)？我可以想到 click() 上的 jQuery 方式，但正如我所说，有时我来自另一个页面。

Answer 1

您可以通过向目标添加负顶部边距并使用相同数量的顶部填充来补偿它来更改 anchor 跳跃的行为方式。单击时浏览器将跳转到负边距的位置，但目标仍具有正确的间距。

这是一个 example jsfiddle

CSS

article {
    display: block;
    margin-top: -50px;
    padding-top: 50px;
}