Here is a hack to have the top margin working right in the anchor links.

https://css-tricks.com/hash-tag-links-padding/

<a href="#goto">Jump</a>

<!-- yadda yadda yadda -->

<h2 id="goto">Header</h2>

Then to solve the headbutting/padding issue, we’ll use a pseudo element to do the same task that the span was doing in our dirty HTML version. We’ll give it a height, which pushes up the size of the header, then use a negative margin to yank it back up into place.

h2::before { 
display: block; 
content: " ";
margin-top: -285px; 
height: 285px; 
visibility: hidden; 
pointer-events: none;
}