JSFiddle - React, Tailwind, and code Playground

HTML

<button class="giu">Animate To Next avaiable List Item</button>
<ul>
<div class="product active" id="product1">1</div>
    <div class="product" id="product2">2</div>
    <div class="product" id="product3">3</div>
    <div class="product" id="product4">4</div>

CSS

* {
    margin:0;
    padding:0;
}

div {
    margin-top: 50px;
    margin-bottom: 600px
}

button {
    position: fixed;
    top:0;
    left:0;
    
}

.active {
    color: red
}

JavaScript

$('.giu').click(function(event) {
        event.preventDefault();
        var n = $(window).height();
        if($('div.active').is(':last')){
            $('body').animate({
                scrollTop: $("body").offset().top
            }, 500);
        } else {
            $('div.active').removeClass('active').next('div').addClass('active');
            $('body').animate({
                scrollTop: $(".product.active").offset().top
            }, 15500);
        }
    });