Html 将页边距添加到页面内的链接

页面中的链接将内容滚动到浏览器窗口的顶部。有没有办法增加利润呢？我将使用一些javascript来引导滚动，但希望有一个可行的回退

因此，简而言之，我可以在CSS中添加一个边距，当它是一个页面链接时，它会在浏览器窗口顶部和一个部分之间添加一些空间

HTML:

当滚动到时，此内容应与页面顶部偏移

Hmm，我会将每个部分中的锚定设置为绝对位置，从部分开始向下大约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>

.科{
填充顶部：10px；
}
...
当滚动到时，此内容应与页面顶部偏移

在页面中链接的首选方法是使用id属性而不是name属性

<a href="#test">

CSS现在支持

---

这是在2021年实现这一目标的最佳方式。

tinkerbin.com不再是了；也许链接可以重写到，但似乎一个也不能很好地工作。完美的例子说明为什么所需的代码应该只保留在SO中。

<a href="#test">

<div id="test">