Question

在我目前正在处理的网站顶部，我使用以下标记定义了“跳至内容”-Link：

<a href="#content" id="skip-to-content">Skip to content</a>

我使用CSS position: absolute将此链接放置在视口外的某个位置。只要有人关注链接（当通过页面“标记”时），链接就会移回视口，并将下面的内容向下推，这样就可以获得所需的空间。

#skip-to-content {

    display: block;
    text-align: center;
    position: absolute;
    top: -999px;

}

#skip-to-content:focus {
    position: static;
    outline: 0 none;
    border: 1px solid #681;
    top: 0;
}

如果您现在单击该链接，我的浏览器会正确跳过内容，但之后链接会失去焦点，因此内容会再次滑落（因为上面的链接会再次移出视口）。所以最后，你需要向上滚动一点才能看到内容的开头。它看起来好像锚链接会跳得太远。

我有什么方法可以确定，链接总是跳到内容而不是下面的某些像素？

请不要建议任何JavaScript解决方案，这是需要在每个浏览器中运行的基本功能。谢谢你的帮助。

- 安德烈

Answer 1

虽然不是一个优雅的解决方案，但尝试将其添加到您的CSS中，它可能会让您了解如何解决它。

#content {
    margin-top: -60px;
    padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/
}

其中60px是跳过链接可见时的近似添加高度。它只是将#content的顶部边缘向上移动了一点点。您可以尝试不同的测量，以使填充回到需要的位置。我不想建议包装div或任何东西，但这可能会给你最初的1.1em顶部填充。

如果您可以在链接可见时找出确切的总增加高度，请在em s而不是px中使用该度量值。

Answer 2

您可能无法将位置重置回static规则中的:focus。

Anchor-Link跳得太远了

2 个答案: