JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo1" id="link1"></div>
<div class="demo2"></div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text demo3">Random text</div>
<div class="text">Random text</div>
<div class="text" id="link2">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>

CSS

.demo1, .demo2 {
    width:100$;
    display:block;
    background:#ffdd00;
    height:100px;
}
.demo2{
    background: #33dd00;
}
.demo3{
    background: #006688;
}
.text {
    padding:40px;
}

JavaScript

var lastScrollTop = 0;
	var isMoving = false;

	$(window).scroll(function () {
	    var currentScroll = $(window).scrollTop();

        //scrolling down?
	    if (currentScroll > lastScrollTop && !isMoving) {
	        var value = '#link2';
	    }
        //scrolling up?
        else if (!isMoving) {
	        var value = '#link1';
	    }
        
	    lastScrollTop = currentScroll;

        //animation
	    if (value && !isMoving) { //if theres any #
	        isMoving = true;
            
	        dest = $(value).offset();
	        dtop = dest != null ? dest.top : null;
            
	        $('html, body').animate({
	            scrollTop: dtop
	        }, 1200, function () {
                
                //setting the flag to avoid checking the scrolling when performing the animation
	            isMoving = false;
	        });
	    }
	});