JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first"></div>
<div id="to"></div>

CSS

html, body {
  height: 100%;
  color: #fff;
}

#first{
   background-color:blue;
   height:100%;
}
#to{
  background:black;height:2000px
}

JavaScript

window.scrolled = false;
var to = $('#to').offset().top;

$(window).bind('scroll',function(){

$('#to').append(' scrollTop : ' + $(window).scrollTop() + '<br> Height of #first : ' + $('#first').height());

    if (!window.scrolled){ 
        $('html, body').animate({ $('#to').scrollTo(to)},1000);
    }
    
    window.scrolled = true;    

})