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;
var docBody = document.body,
    docEl = document.documentElement,
    scrollElement = /WebKit/.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? docBody : docEl;
var lastScrollTop = scrollElement.scrollTop;
function stopScroll(e)
{
    if((scrollElement.scrollTop - lastScrollTop + tempY) >= 300){
       window.scrollTo(0,300);
    }
    lastScrollTop = scrollElement.scrollTop;
    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;