JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>

CSS

.div {
        width: 100%;
    }

    .red {
        background: red;
    }

    .yellow {
        background: yellow;
    }

    .green {
        background: green;
    }

    .blue {
        background: blue;
    }

JavaScript

function setHeights() {
  $('.nbhd').css('height', window.innerHeight);
}

var ignoreScrollEvents = false;

function scrollSections() {

  if ($('body, html').is(':animated')) {
    return;
  }

  var currentSectionId = $('.nbhd.scrolledto').data('id');
  currentSectionId++;

  $('.scrolledto').removeClass('scrolledto');

  var section = $('#id'+currentSectionId);
	if (section.length > 0) {
    section.addClass('scrolledto');

    var pos = section.offset().top;

    $('body, html').animate({scrollTop: pos}, 1000, function() {
      console.log('animated');
      ignoreScrollEvents = true;
              
      setTimeout(function() {
        ignoreScrollEvents = false;
      }, 100);
      
    });
  }
}

setHeights();

$( window ).on( "scroll", function() {
  if (!ignoreScrollEvents) {
    scrollSections();
  }
});