javascript - 将滚动区域的顶部与 CSS 固定的重叠元素分开

Question

我的网页顶部有一个 div(例如“TopDiv”)，当您单击由 JavaScript 控制的按钮时，它会隐藏或显示该 div 的内容。

下面文章中的headers同样是JS控制的；您可以单击标题以显示或隐藏文本。

问题是:

<a href="#intro">Introduction</a>

<h2 id="intro">Introduction</a>

当我单击指向#intro 的链接时，页眉会弹出到页面顶部，实际上隐藏在 TopDiv 下。我对包含文章的列应用了填充，因此页面标题和文章默认显示在 TopDiv 下方。但是，TopDiv 的位置由 CSS 固定，因此一旦您开始滚动，标题就会被吸到 TopDiv 下。

所以我想知道是否有一种方法可以修改内部页面链接，使目标跳到一个位置，比方说，距页面顶部 150 像素，而不是最顶部。

Answer 1

解决此问题的最佳方法是将链接设置到其上方的另一个元素。像这样:

<a href="#intro">Introduction</a>

<br id="intro">
<br>
<h2>Introduction</a>

现在，您跳转到它跳转到的所需页面顶部的正上方。

附注<br>只是一个例子。您还可以制作一个空的 div、一个空的 span 或任何您想要的东西。 <br>这很好，因为它是一个有效的功能元素，这意味着页面将具有比空 div 更好的 SEO。