You don’t seem to be understanding the problem.
The page is scrolling to the link as required but your fixed header is hiding it. Fixed elements are removed from the flow and will not react with the rest of the page.
If I set the header opacity then you can see that indeed the page did scroll to the right place.
When you use fixed headers they will sit on top of whatever is in the way. The page will not scroll to magically avoid them.
You would need to program an offset into your destinations that matches the height of the header but is not an easy task.
A ‘hacky’ way to avoid content sitting under the header using html and css only is to position a destination link the same distance away from the content that matches the height of the header.
Here’s an old codepen that shows the technique in action.
It’s pretty fragile and relies on the header always being the same height.