JSFiddle - React, Tailwind, and code Playground

HTML

<style> hr { margin: 5em; } </style>
<nav style=position:fixed> 
    <a href=#a>A</a>
    <a href=#b>B</a>
    <a href=#c>C</a>
</nav>
<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />
<div id=a>A</div>
    
<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />
<div id=b>B</div>


<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />
<div id=c>C</div>



<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

JavaScript

addEventListener("hashchange", function(){
    setTimeout(function(){ document[document.documentElement.scrollTop ? "documentElement":"body"].scrollTop-= (innerHeight/2.1) ;}, 1); 
}, false);