My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header.
Is there a way to adjust the scroll position by a certain number of pixels using plain JavaScript or CSS? Or perhaps there is a more elegant JavaScript solution that can work seamlessly across IE11, Edge, Chrome, and FF?
<header> ... </header> <!-- site-wide sticky header using position:sticky -->
<main>
<nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
<a href="#top">Top</a>
<a href="#bottom">Bottom</a>
</nav>
<div class="content">
<section>
<a id="top"></a>
...
...
...
</section>
...
<section>
<a id="bottom"></a>
...
...
...
</section>
</div>
</main>