Separating top of scroll area from overlying element fixed by CSS
I have a web page with a div (eg "TopDiv") at the top that hides or displays the contents of that div when you click a button controlled by JavaScript.
Headers in the following article are similarly JS controlled; you can click the header to display or hide text.
Here's the problem:
<a href="#intro">Introduction</a>
<h2 id="intro">Introduction</a>
When I click the link to #intro, the header pops up to the top of the page, where it's effectively buried under TopDiv. I've applied padding to the column containing the article, so the page title and article appear below TopDiv by default. However, TopDiv is fixed in position by CSS, so once you start scrolling, the headers just get sucked under TopDiv.
So I wondered if there's a way to modify internal page links so that the target jumps up to a position, say, 150 pixels from the top of the page, rather than the very top.
The best way to tackle this is to set the link to another element above it. Like this:
<a href="#intro">Introduction</a>
<br id="intro">
<br>
<h2>Introduction</a>
Now, you jump to just ABOVE the desired top of the page that it jumps to.
ps <br> is just an example. You could also make an empty div, an empty span, or just about anything you want. <br> is good though because it's a valid and functional element which means the page will have better SEO than having an empty div.
As suggested, creating your links earlier in your code will allow for the gap in the your overlying css... but to be exact you might want to include an empty div with an id that is the height of the element overlaying your content. Assuming your overlying content is 100 px. Try the following...
HTML
<a href="#intro">Introduction</a>
<div id="gapstop"></div>
<h2>Introduction</h2>
CSS
#gapstop {height="100px";}