JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="target1">
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>
            target1<br>

        </div>
        <div id="target2">
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>
            target2<br>

        </div>
        <div id="target3">
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>
            target3<br>

        </div>
    </body>

JavaScript

$(window).scroll(function() { //when window is scrolled
            var target1_top = $('#target1').offset().top;
            var window_top = $(window).scrollTop();
            var diff = target1_top - window_top;
            console.log(diff)
            if (diff < 0) {// this you need to specify, howvwer pixels you need for the auto scroll to happen
                //
                $('html, body').animate({
                    scrollTop: $("#target2").offset().top
                }, 2000);
            }
        });