Override browser's built in 'jump/scroll to id in hashtag' functionality

I use hashtags a lot in URLs, to jump to a specific section of a page whose id matches the hashtag.

However I'd like to override this functionality to, for example:

Scroll to 200px above the relevant id Change the background of the relevant id Do any other arbitrary stuff I want to program in

Is there a listener or something that I can override to do this?

I know that in CSS I can put:

html { scroll-behavior: smooth; }

and it will scroll to the element instead of jumping. But it still puts the element right at the top of the page, which isn't what I want.

Similarly, document.getElementById('my-id').scrollIntoView(); has the same issue of putting it right at the top of the page.

If it's possible to do it without a jQuery plugin (i.e. with native JS) that would be preferable.

Please note that I'm talking about the behaviour when first loading the page, not when clicking on a link in the page; i.e. when someone loads https://mywebsite.com/foos#section2 I want my altered behaviour to kick in as soon as the page loads and scroll to a bit above section2, etc.