添加页面内链接的边距
问题描述:
页面内的链接将您的内容滚动到浏览器窗口的顶部。有什么办法可以为此添加保证金吗?我将使用一些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>
答
页首链接的首选方式是使用id而不是name属性。
<a href="#test">
应该匹配了:
<div id="test">
从这里你可以轻松地添加填充到#TEST div的顶部,这将是你的滚动位置。
答
嗯,我将设置锚在每个部分进行绝对定位,约10px的从节开始了。它看起来像这样:
.section {
position: relative;
}
.section > a {
position: absolute;
top: 10px;
}
这基本上是一个10像素的边距。您可以相应地调整顶部的值以更改边距/填充。我还使用了直接后代操作符(>),因此段落中的链接不会受到影响。
另外,如@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>
谢谢!将接受尽快 – technopeasant
tinkerbin.com不再;也许这个链接可以被重写到http://tinkerbin.heroku.com/,但它似乎也不能很好地工作。 – Arjan