How do I hyperlink to a point 70px above an Anchor?

 

I'm not sure how that helps. It moves all content down 70px down and leaves a 70mm gap at the top of the page, above the header and menu. If body padding was a solution, it would not work for mid-page anchors. (The first "70mm" was a typo)

By @Galeodan

I'm assuming you have some content before the sticky position takes effect when the page is scrolled and the navigation reaches the top of the browser window, otherwise the padding-top on the body suggestion should work IF the navigation was sticky by default.

Try the below (not quite sure what browsers support 'behavior: smooth' that seems to be a bit vague when you try and look it up on the 'can I use' website.

<script>
const topLinks = document.querySelectorAll('#mySubnav a[href^="#"]');
topLinks.forEach(link => {
link.onclick = function(event) {
event.preventDefault();
let anchorHash = this.getAttribute('href');
let scrollTo = document.querySelector(anchorHash);
let offsetTopPosition = 100;
let elementPosition = scrollTo.offsetTop;
let offsetPosition = elementPosition - offsetTopPosition;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
};
});
</script>