JSFiddle - React, Tailwind, and code Playground

HTML

<div id="v">
 <section id="blue"></section>
  <section id="red"></section>
</div>

CSS

div {
  width: 80%;
  height: 400px;
   overflow: scroll;
}

#blue {
  background-color: blue;
  height: 620px;
 
}

#red{
  background-color: red;
  height: 420px;
}

JavaScript

var o = true;

if (o === true) {
$('div').scroll(function () {
		if(o){
      $('div').animate({
          scrollTop: $("#red").offset().top
      }, 1000);
      o=false;
      
      
    } 
});
} 

else if (o === false){
$('div').scroll(function () {
		if(o){
      $('div').animate({
          scrollTop: $("#blue").offset().top
      }, 1000);
      o=true;
     document.write(o);
    } 
});
}