Question

我有一个包含一些博客项目的页面。这些项目前面有锚点，有时我会使用#my-item直接链接到它们。

问题是，我在顶部有一个固定的菜单，该菜单现在涵盖标题，因为锚链接拥抱浏览器的顶部。

是否可以将其降低（例如100px）？我可以在click()上想到一种jQuery方式，但正如我所说，有时候我来自另一页。

Answer 1

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

CSS

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

Answer 2

为什么不在元素中添加一些填充？

<h3 style="padding-top: 100px;">The subheading</h3>

浏览器将向下滚动，直到视口符合元素的上边缘，并且元素在内容和边框之间有100px的空间。

Answer 3

最简单的方法是在内容的顶部添加边距或填充。考虑一下这个HTML：

<a name="post1234"></a>
<article>
  Lorem ipsum...
</article>

当哈希指向#post1234时，链接将位于屏幕顶部。所以只需在文章的顶部添加填充/边距：

article { padding-top: 100px; }

Answer 4

解决方案：

为您添加填充a

a.anchor{
    position: relative;
    padding-top: 100px;
    width:1px;
    display: block;
}

THX

Answer 5

如果有人想知道如何按下页面上所有锚点的跳转目标，这里是：

/* all anchors and all elements with the anchor class */
a, .anchor { margin-top: -2em; padding-top: 2em; }

/* all anchors with an href attribute */
a[href] { margin-top:0; padding-top: 0; }

您也可以使用margin-top:unset;代替margin-top:0;

如果你真的感觉很危险，你可以使用*[id]并将其应用于具有id的所有内容。但我可能不会这样做。我不知道。试一试。在野外散步。

此处的其他答案似乎包括显示设置，但我不知道这是如何必要或有用的。

单击锚点时按下页面

5 个答案: