2

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

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

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

4

6 回答 6

4

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

这是一个示例 jsfiddle

CSS

article {
    display: block;
    margin-top: -50px;
    padding-top: 50px;
}
于 2013-01-31T14:49:40.093 回答
1

这是一个旧线程，但由于它仍在搜索结果中弹出，因此应注意当前 CSS 提供了scroll-margin-top用于该目的的属性，该属性自 2021 年起得到广泛支持。您可以简单地使用

#my-item { scroll-margin-top: 100px; }

在不影响边距和填充的情况下将项目向下推。

于 2021-12-10T11:22:26.950 回答
0

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

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

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

于 2013-01-31T14:30:53.393 回答
0

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

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

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

article { padding-top: 100px; }
于 2013-01-31T14:31:50.413 回答
0

解决方案：

为您添加填充a

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

谢谢

于 2013-01-31T14:35:11.623 回答
0

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

/* 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 的东西。但我可能不会这样做。我不知道。试一试。在野外散步。

这里的其他答案似乎包括显示设置，但我看不出这有什么必要或有帮助。

于 2015-11-15T00:53:31.613 回答