Html 如何将填充顶部添加到ancre链接？

当我点击锚链接时，我想在我的

div

中添加一个

padding top

：

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

...

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

...
... 

问题是，我想在链接将我重定向到锚点时添加填充。我不想在html中添加

padding top

，我只是不想我的div位于页面顶部，我需要一个padding或margin top

---

谢谢。

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

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

---

尽管如果您还没有使用jquery，使用简单的javascript可能是值得的。

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

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

---

虽然如果您还没有使用jquery，但使用简单的javascript可能值得一试。

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

您可以查看本文中的几个解决方案

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

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

用您认为合适的值替换200px。

---

您可能还希望使用一个类来应用它，因为我认为您不会只希望在一个项目上使用它：）

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

您可以查看本文中的几个解决方案

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

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

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

我认为，最好的方法是

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

来源和演示：

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

边距顶部：-50px；

和

填充顶部：50px；

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

z-index

，我认为，最好的方式是

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

来源和演示：

---

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

margin-top:-50px；

和

padding-top:50px；

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

z-index

使用JavaScript添加它？您想单击链接，并将填充应用于

div

，或

a

，元素吗？是的。事实上，我不想在我的html中添加填充，我只需要将所有页面翻译到底部（这意味着在顶部和我的锚Id之间添加一个“padding top”），用JavaScript添加它？你想单击链接，并将填充应用到

div

，或

a

，元素吗？是的。事实上，我不想在我的html中添加填充，我只需要将所有页面翻译到底部（这意味着在顶部和锚Id之间添加一个“padding top”），如果我这样做，这意味着，如果我向上滚动，那里将有一个20px的空白。我不想要这个。对不起，我的魔力让我失望了，没有让我看到你不想要那个。你能通过编辑你的原始问题来解释你真正想要的行为吗？如果我这样做，这意味着，如果我向上滚动，那里将有一个20px的空白。我不想要这个。对不起，我的魔力让我失望了，没有让我看到你不想要那个。你能通过编辑你的原始问题来解释你真正想要的行为吗？我同意边距+填充的方式很难看。不幸的是，你的方式对我没有任何帮助，指向元素仍然会推到窗口顶部。我同意边距+填充方式很难看。不幸的是，您的方式对我没有任何帮助，指向元素仍然会推动窗口顶部。