单击锚点时下推页面答案

【问题标题】：Push down the page when an anchor is clicked单击锚点时下推页面
【发布时间】：2013-01-15 16:39:02
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

这是example jsfiddle

CSS

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

为什么不给元素添加一些内边距？

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

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

【讨论】：

【解决方案4】：

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

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

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

article { padding-top: 100px; }

【讨论】：

【解决方案5】：

解决方案：

为你添加内边距a

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

谢谢

【讨论】：

【解决方案6】：

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

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

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

【讨论】：