如何控制锚落地位置

Question

我们目前遇到的问题是，www.example.com/#section 形式的链接无法跳转到正确的位置，因为我们在顶部有一个固定的导航，覆盖了网站的第一部分。

<div id="anchorpoint">Some content here</div>

如何告诉浏览器跳转到锚点位置+100px？

谢谢你。

Answer 1

HTML（添加额外的锚标记）

 <a id="anchorpoint" class="anchor"></a>
 <div>Some content here</div>

CSS

.anchor {
    display:block;
    padding-top:100px;
    margin-top:-100px;
 }

这是对固定位置导航栏遮挡锚点的轻微修改。优点就在那里，您不需要预先填充实际容器的填充和边距。

Answer 2

这对我有用：

<a href="#learnmore"><button type="button" class="large button">Click me!</button></a>
<a class="hidden-anchor" name="learnmore"></a>

还有锚链接的 CSS。

 .hidden-anchor {
    position: absolute;
    top: -100px;
 }

Answer 3

您可以将

scroll-margin-top: 100px

应用于要滚动到的元素（将值设置为导航栏的高度）。