添加页面内链接的边距

页面内的链接将您的内容滚动到浏览器窗口的顶部。有什么办法可以为此添加保证金吗？我将使用一些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>

来源

2011-11-27 technopeasant

页首链接的首选方式是使用id而不是name属性。

<a href="#test">

应该匹配了：

<div id="test">

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

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

来源

2011-11-27 03:17:18

谢谢！将接受尽快 – technopeasant

tinkerbin.com不再;也许这个链接可以被重写到http://tinkerbin.heroku.com/，但它似乎也不能很好地工作。 – Arjan

嗯，我将设置锚在每个部分进行绝对定位，约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>

来源

2011-11-27 03:16:09

添加页面内链接的边距

回答

相关问题