JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div">
        <div id="scrollTOO"><h2>Scoll Here for Auto Scroll</h2></div>
        <div id="scrollTo"></div>        
</div>

CSS

body {
    color: #eee;
}

.div {
    width:100%;
    margin: 0px;
    padding: 0px; 
    height: 5000px;
    background-color:#2c2c2c;
}

.div h1 {
    text-align: center;
    padding-top: 26px;
}

#scrollTo {
    width: 500px;
    height: 150px;
    position: absolute;
    top: 1000px;
    left: 25px;
    background-color: #2ff884; 
    float: right;
}

#scrollTOO {
    position: relative;
    top: 300px;
    left: 25px;
}

JavaScript

var scroll = true;

$(window).scroll(function (e) {

    var position = $(document).scrollTop();
    var startP = $("#scrollTOO").position();
    var finishP = $("#scrollTo");
    
    if(position > startP.top && startP.top+100 && scroll==true ) {
        scroll = false;
        
        $('html,body').animate({scrollTop: finishP.offset().top},2000);
        
    } if (position > 0 && position < 300 && scroll==false) {
        scroll = true;   
    }
})