如何将 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

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

您可以查看本文以获取多种解决方案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;
}

如果你选择丑陋的方式（即

margin-top: -50px;

和

padding-top: 50px;

）图层将保留在底部，你需要使用

z-index

。