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

Question

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

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

...

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

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

谢谢。

Answer 1

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

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

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

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

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