如何添加padding-top到ancre链接？

Question

我想添加一个padding-top我div当我点击链接的锚：

<a href="#myAnchor">Go to my anchor</a> 

... 

<div id="myAnchor"> ... </div> 

的问题是，我想刚才添加的填充时我的链接重定向我的锚。我不想在html中添加padding-top，我只是不希望我的div位于我的页面顶部，我需要填充或页边距。

谢谢。

Answer 1

我只知道一种方法：javascript。如果您已经使用jQuery：

$('a[href="#myAncre"]').click(function(){ 
    $("#myAncre").css("padding-top", "20px"); 
    }); 

但如果你不使用jQuery的已经，它可能是值得用简单的JavaScript来做到这一点。

Answer 2

我认为你要做的是在点击链接时将浏览器窗口滚动到目标上方的几个像素，而不是让目标与浏览器窗口顶部齐平。

您可以查看这篇文章的几种解决方案http://css-tricks.com/hash-tag-links-padding/

最简单的解决方案，通常似乎是在你的CSS添加：

#myanchor{ 
    margin-top: -200px; 
    padding-top: 200px; 
} 

与任何价值，你认为合适的更换200像素。 您也不妨使用一个类应用这个，因为我asume你不会只是想使用它的一个项目:)

Answer 3

我认为，最好的办法是

#myanchor:before { 
    display: block; 
    content: " "; 
    height: 50px; 
    margin: -50px 0 0; 
} 

来源和演示：http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-B

如果选择丑陋的方式（即margin-top: -50px;和padding-top: 50px;）层将留在底部，您需要使用z-index。