如何控制锚着陆位置

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

这是对固定位置导航栏隐藏锚点的轻微修改.优点在于,您不预先填充实际容器的填充和边距.