JSFiddle - React, Tailwind, and code Playground

HTML

<a id="stopHere" >Hi !</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

#stopHere
{
    position:absolute;
    top:300px;
    left:0px;
    width:100%;
    border:1px solid black;
    text-align:center;
}

JavaScript

var theAnchor=document.getElementById("stopHere");
var tempX,tempY;

function stopScroll(e)
{
    var c=parseInt(document.getElementById('stopHere').offsetWidth);
    var d=parseInt(document.getElementById('stopHere').offsetHeight);
    /* the if is to test if the mouse is over the anchor */
    if(tempX<=c&&tempY<=300+d&&0<=tempX&&300<=tempY)window.scrollTo(0,300);
}

function update(e)//to have the x and y of the mouse
{
    var doc=document.documentElement;
    var body=document.body;
    tempX=(e.pageX)?e.pageX:e.clientX+(doc&&doc.scrollLeft||body&&body.scrollLeft||0)-(doc&&doc.clientLeft||body&&body.clientLeft||0);
    tempY=(e.pageY)?e.pageY:e.clientY+(doc&&doc.scrollTop||body&&body.scrollTop||0)-(doc&&doc.clientTop||body&&body.clientTop||0);
}

window.onscroll=stopScroll;
window.onmousemove=update;