如何在ancre链接中添加padding-top？

Question

当我点击指向锚点的链接时，我想向padding-top添加div：

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

...

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

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

谢谢。

Answer 1

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

您可以查看本文以获取多个解决方案http://css-tricks.com/hash-tag-links-padding/

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

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

用您认为合适的任何值替换200px。 您可能还希望使用一个类来应用它，因为我认为您不仅希望在一个项目上使用它：）

Answer 2

我只知道一种方式：javascript。如果您已经在使用jquery：

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

虽然如果你还没有使用jquery，那么使用简单的javascript可能是值得的。

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。