将滚动区顶部与CSS固定的上覆元素分离开来

Question

我有一个带有div的网页。( "TopDiv")当单击由JavaScript控制的按钮时，在顶部隐藏或显示该div的内容。

以下文章中的标题类似于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，空的跨度，或者你想要的任何东西。<br>是好的，但因为它是一个有效的和功能的元素，这意味着页面将有更好的SEO比有一个空的div。

Answer 2

正如建议的那样，在代码的前面创建您的链接将允许在您的上覆css.但确切地说，您可能希望包含一个空div，其中包含一个id，该id是覆盖内容的元素的高度。假设您的覆盖内容为100 px。试试下面的..。

HTML

<a href="#intro">Introduction</a>
<div id="gapstop"></div>
<h2>Introduction</h2>

CSS

#gapstop {height="100px";}