JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section-one" style="width: 100%; height: 1000px;">
    Section One
</div>

<div id="section-two" style="width: 100%; height: 1000px;">
    Section Two
</div>

<div id="section-three" style="width: 100%; height: 1000px;">
    Section Three
</div>

<div id="section-four" style="width: 100%; height: 600px;">
    Section Four
</div>

CSS

div {background-color:red}
.highlight {background-color:yellow}

JavaScript

$(document).scroll(function() {
    $("div:not(.highlight)").each(function() {
        if (isScrolledIntoView(this)) {
           $("div").removeClass("highlight");
           $(this).addClass("highlight");
           $("body").animate({ scrollTop: $(this).offset().top }, 1000);
           return;
        }
    });
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (elemTop <= docViewBottom) && (elemTop > docViewTop);
}