链接到页面上的锚标记时元素周围的间距[重复]

Posted 2023-02-22

【中文标题】链接到页面上的锚标记时元素周围的间距[重复]

【英文标题】：Spacing around element when linking to anchor tag on page [duplicate]

【发布时间】：2018-01-07 16:59:22

【问题描述】：

对于大多数人来说可能是一个愚蠢的问题，但似乎无法让它正常工作。我正在尝试跳转到页面上的锚点。这工作正常，如我提供的小提琴所示。我创建了一个尽可能简单的示例来说明我要完成的工作。

当我点击链接时，它应该跳转到页面上的锚点，但我似乎无法弄清楚如何在锚点顶部添加间距。单击锚点时，它会跳转到页面上的锚点，但锚点位于浏览器的顶部。我想要锚点之前的空间，因为我在顶部有一个棒状导航栏。我已经尝试了填充顶部，边距顶部，一切都无法弄清楚。这是一张图片来解释我想要做什么。

点击锚点时，会跳转到页面上的锚点，但默认在浏览器顶部。

我想要的是当我点击锚标签时有间距。

https://jsfiddle.net/yao25Lxc/3/

我试过了

margin-top:

和

padding-top:

希望我解释得足够好。我需要间距的原因是因为我有一个固定的顶栏，它覆盖了我在页面上链接到的标题，所以我需要空间来弥补这一点，似乎没有任何效果。

我链接到的标题文本位于顶部栏下方

当我点击锚点时我需要间距，所以我的顶部栏不会覆盖文本。

【参考方案1】：

定位 h3 元素并为其添加行高。也许不是最优雅的解决方案，但它确实有效。

html：

<nav>
<ul>
<li class=""><a href="#anchor">Test</a></li>
</ul>
</nav>
<div class="spacecontainer">

</div>

<h3 id="anchor">
<a id="">TEXT</a>
</h3>
<div class="spacecontainer">

</div>
<div class="spacecontainer">
</div>

CSS：

    .spacecontainer 
  width:100%;
  height:500px;


h3 
 line-height:50px;

https://jsfiddle.net/8awx6hy4/

【参考方案2】：

为#anchor 创建一个css，并在那里应用你的padding-top。例如：

#anchor padding-top: 30px 

https://jsfiddle.net/bonez0607/59eqnqyp/