css - Div anchor 滚动太远

Question

我在我的网站顶部使用了一个静态栏，大约 20 像素高。当我单击一个 anchor 链接时(对于那些不知道的人，维基百科上的导航就是这样工作的。单击一个标题，浏览器将向下移动到它)部分文本会在顶部栏后面消失。

有什么办法可以阻止这种情况发生吗？我无法使用 iFrame。我唯一能想到的就是让它每次都向后滚动一点，但是还有另一种方法吗？一些 CSS 设置来操纵 body 或其他东西？

Answer 1

您可以只使用 CSS 而无需任何 javascript。

给你的 anchor 一个类:

<a class="anchor"></a>

然后，您可以将锚定位为比它实际出现在页面上的位置更高或更低的偏移量，方法是将其设为 block 元素并对其进行相对定位。 -250px 会将 anchor 向上定位 250px

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

一月见 offsetting an html anchor to adjust for fixed header