offset scroll to in html?

Question

I am trying to do the thing in html where you click on a link and it automatically scrolls to where you want in the page. Here is the button/link part of the code:

<li><a href="#Origins">Origins</a></li>

And then I have it link to this part of the page represented by this code:

<h3 id="Origins">Origins</h3>

This works perfectly fine, however, my header of the page at the top, which is h1, is set to fixed position. So when you click the link, it goes too far down to where the header at the top is covering the "origins" part of the page. I tried adding padding to the top of origins which works but then there is a lot of blank space above "origins" in the page which I do not want. Does anyone have any ideas? Thanks in advance!

Answer 1

scroll-margin-top did the trick for me.

<h1>Heading</h1>

<ul><li><a href="#Origins">Origins</a></li></ul>

<div class="space"></div>

<h3 id="Origins" style="scroll-margin-top: 7em;">Origins</h3>

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top