Quick tip: in CSS you can set some space for when an element is targeted, such as a heading anchor.

h2 {
scroll-margin-top: 2ex;
}

Using an ex unit will use the x-height, which is exactly what you imagine it’ll be: the height of the x character in that font *and* size.