将滚动区域的顶部与由CSS固定的重叠元素分开
当你点击一个由JavaScript控制的按钮时，我在顶部有一个带div的网页（例如“TopDiv”），用于隐藏或显示该div的内容。
以下文章中的标题类似JS控制; 您可以单击标题以显示或隐藏文字。
这是问题：
<a href="#intro">Introduction</a>
<h2 id="intro">Introduction</a>
当我点击#intro的链接时，标题会弹出到页面的顶部，在那里它被有效地掩埋在TopDiv下。 我已将填充应用于包含该文章的列，因此默认情况下页面标题和文章显示在TopDiv下方。 但是，TopDiv是通过CSS固定的，所以一旦你开始滚动，头部就会被TopDiv吸引。
所以我想知道是否有办法修改内部页面链接，以便目标跳转到某个位置，例如距离页面顶部150像素，而不是顶部。
解决此问题的最佳方法是将链接设置为上面的另一个元素。 喜欢这个：
<a href="#intro">Introduction</a>
<br id="intro">
<br>
<h2>Introduction</a>
现在，您跳转到跳转到的页面所需的顶部。
ps <br>只是一个例子。 你也可以做一个空白的div，一个空的span，或者任何你想要的东西。 <br>虽然是好的，因为它是一个有效的功能元素，这意味着页面会比没有空格的页面更好。
正如所建议的，在代码中早些时候创建链接将允许覆盖css中的空白......但是确切地说，您可能需要包含一个带空格的div，该id是覆盖内容的元素的高度。 假设你的覆盖内容是100像素。 尝试以下...
HTML
<a href="#intro">Introduction</a>
<div id="gapstop"></div>
<h2>Introduction</h2>
CSS
#gapstop {height="100px";}
上一篇: Separating top of scroll area from overlying element fixed by CSS