JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a />Text Text Text Text Text Text Text Text Text
<br /><br /><br /><br /><br />
<a />Text Text Text Text Text Text Text Text Text
</body>
CSS
body
{
height:3000px;
}
JavaScript
var tempY;
function getClosestAnchor(e)
{
if((window.event?event.keyCode:e.which)!=97)return;
var allAnchors=document.getElementsByTagName("a");
var allDiff=[];
for(var a=0;a<allAnchors.length;a++)allDiff[a]=margeY(allAnchors[a])-tempY;
var smallest=allDiff[0];
for(var a=1;a<allDiff.length;a++)
{
if(Math.abs(smallest)>Math.abs(allDiff[a]))
{
smallest=allDiff[a];
}
}
window.scrollBy(0,smallest);
}
function margeY(obj)
{
var posY=0;
if(!obj.offsetParent)return;
do posY+=obj.offsetTop;
while(obj=obj.offsetParent);
return posY;
}
function update(e)
{
if(e.pageY)tempY=e.pageY;
else tempY=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop)-document.documentElement.clientTop;
}
window.onkeypress=getClosestAnchor;
window.onmousemove=update;