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

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

<a href="#test">

应符合：

<div id="test">

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

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

Answer 2

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

.section {
    position: relative;
}

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

这基本上是一个10像素的边距。您可以相应地调整顶部的值以更改边距/填充。我还使用了直接后代运算符（＆gt;），因此段落中的链接不会受到影响。

另外，如@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 3

CSS 现在支持 scroll-margin-top。

这是 2021 年最好的方式。

在页面内链接添加保证金

3 个答案: