如何控制锚点的落地位置

Question

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

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

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

谢谢。

- Simon Ferndriger

---

可能是固定位置的导航栏遮挡了锚点的重复问题。 - Telmo Marques

唯一不涉及JS和重新定位元素的解决方案是将锚点放在要滚动到的元素内部，使其绝对定位，给它一个100像素的顶部边距并隐藏它。这样，您实际上会滚动到那个不可见的元素，使所需的元素出现在顶部。 - Shomz

@TelmoMarques 你对这个问题是正确的。然而，那些答案并不令人满意。 - Simon Ferndriger

@Shomz 它可以工作，但仅当您不将其绝对定位时。 - Simon Ferndriger

Answer 1

HTML（添加额外的锚点标签）

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

CSS

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

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

- Simon Ferndriger

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;
 }

- Maximus