Mobile App Anchor Links Jump Beneath Fixed Header

Question

I created anchor links for easy navigation of one of my mobile pages with fixed headers / fixed banner; but, every time I clicked the anchor link it jumped further down the page than I had intended, with the start section of the anchor slipping beneath the header (out of view). I couldn't figure out how to resolve anchor links jumping beneath fixed header when I clicked on them.

I found the solution in a PixelFlips.com article that solved it beautifully.

Answer 1

I found the solution in a PixelFlips.com article that resolved my issue.

Solution Overview:

HTML Code:

<ul>
  <li><a href="#section1">Anchor Text</a></li>
  <li><a href="#section2">Anchor Text</a></li>
  <li><a href="#section3">Anchor Text</a></li>
</ul>

<!-- EMPTY SPAN SECTIONS ABOVE EACH ANCHOR BOOKMARK -->
<span class="anchor" id="section1"></span>
<div class="section"></div>

<span class="anchor" id="section2"></span>
<div class="section"></div>

<span class="anchor" id="section3"></span>
<div class="section"></div>

CSS code:

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}