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

Question

当我点击指向 anchor 的链接时，我想在我的 div 中添加一个 padding-top :

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

...

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

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

谢谢。

Answer 1

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

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

最简单的解决方案，通常似乎是在您的 css 中添加:

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

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