JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
DIV1
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br><br>
<div id="div2">
DIV2
</div>

CSS

body
{
  height: 1000px;
}

JavaScript

$(window).scroll(function() {
setTimeout(function() {
  var div1 = $('#div1').offset();
  var div2 = $('#div2').offset();
  var page = $("html, body");
  if ($(this).scrollTop() > 50) 
  {
    page.stop();
    page.animate({
      scrollTop: div1.top
    },500);
  }
  if ($(this).scrollTop() > div1.top + 100) 
  {
    page.stop();
    page.animate({
      scrollTop: div2.top
    },500)
  }
  },1000);
});