JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<a href="#link1">Link one</a>
<a href="#link2">Link two</a>

<div id="link1">
    The first.
</div>

<div id="link2">
    The second.
</div>

CSS

a {
    display: inline-block;
    padding: 0.5em;
    border: 1px solid #000;
    border-radius: 1em 0;
}
div {
    margin-top: 1000px;
    height: 1000px;
}

JavaScript

function addMargin() {
    window.scrollTo(0, window.pageYOffset - 100);
}

window.addEventListener('hashchange', addMargin);