为页面内的链接添加边距

Question

页面内的链接将您的内容滚动到浏览器窗口的顶部。有什么办法可以增加保证金吗？我将使用一些 JavaScript 来引导滚动，但希望有一个可行的后备方案。

简而言之，我可以在 CSS 中添加边距，以便在浏览器窗口顶部和页面链接部分之间添加一些空间吗？

HTML：

<nav>
    <a href="#test">TEST</a>
</nav>
<div class="section">
    <a name="test"></a>
    <p>This content should be offset from the top of the page when scrolled to</p>
</div>

Answer 1

CSS 现在支持 scroll-margin-top。

这是 2021 年最好的方法。

Answer 2

进行页内链接的首选方法是使用 id 而不是 name 属性。

<a href="#test">

应该匹配：

<div id="test">

从这里您可以轻松地将填充添加到 #test div 的顶部，这将是您的滚动位置。

示例：http://tinkerbin.com/EvV7byy9

Answer 3

嗯，我会将每个部分中的锚点设置为绝对定位，距该部分的开头大约 10px。它看起来像这样：

.section {
    position: relative;
}

.section > a {
    position: absolute;
    top: 10px;
}

这本质上是 10 像素的边距。您可以相应地调整 top 的值来更改边距/填充。我还使用了直接后代运算符 ( > )，因此段落中的链接不会受到影响。

另外，正如 @NathanManousos 所提到的，您不应再使用 name 属性，而应使用 ID 属性。相对文档链接将滚动到任何元素的 ID，而不仅仅是链接。您可以在每个部分 DIV 上放置一个 ID，并使用填充滚动到 div 的顶部，填充将导致实际内容在 div 中进一步向下。

<style>
    .section {
        padding-top: 10px;
    }
</style>

...

<nav>
    <a href="#test">TEST</a>
</nav>
<div class="section" id="test">
    <p>This content should be offset from the top of the page when scrolled to</p>
</div>

Answer 4

解决方案是scroll-margin-top。这允许您指定任何单位的偏移量，为您滚动到的部分提供“空间”
请参阅 ARA Münsterlingen | 的实时示例安拉根

.anlage-post {
    scroll-margin-top: 175px;
}