JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation"> <a href="#" id="prev">Previous</a>

    <br> <a href="#" id="next">Next</a>

</div>
<div class="demo-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum, enim sed adipiscing rhoncus, quam mi auctor lorem, ac molestie augue lacus luctus dolor. Quisque ac felis adipiscing, porta justo vitae, semper ligula. Morbi consectetur hendrerit mi, nec dictum urna scelerisque sit amet. Aliquam molestie quis nisi eget scelerisque. Ut at felis tristique, adipiscing nibh vel, accumsan nisl. Aenean venenatis quis justo tincidunt laoreet. Nullam et tellus et lorem faucibus auctor quis vel eros. Curabitur tortor nisi, rhoncus sit amet placerat nec, eleifend vel mi.Pellentesque suscipit, tortor eget ultricies facilisis, orci felis vulputate lectus, et lobortis mauris dolor id metus. Quisque ut nunc aliquam, vulputate justo eget, commodo nisl. Cras nulla sem, congue a vulputate ut, blandit nec sem. Ut ullamcorper, justo in hendrerit pharetra, ligula elit convallis velit, commodo rhoncus purus urna sit amet purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras metus diam, vulputate eget malesuada eget, vulputate ut dolor. Donec congue purus sit amet elit hendrerit, ornare facilisis ipsum elementum.Praesent congue sit amet dolor id volutpat. Aenean non pellentesque orci, sit amet porttitor urna. Nunc cursus malesuada elit, in vehicula nisl fringilla eu. Sed quis purus gravida libero semper laoreet. In at leo ac nulla venenatis porta ac vitae ligula. Cras ac dignissim leo. Aenean in lectus in nunc egestas commodo. Aenean nec arcu nec erat eleifend euismod. Nulla lobortis leo sit amet convallis commodo. Phasellus lacinia libero vel felis faucibus dignissim ultricies quis lectus. In metus ante, ornare et dapibus vitae, blandit ac ipsum. Maecenas congue lectus urna, vel auctor sapien ullamcorper eget. Cras nec venenatis lacus. Donec urna orci, fermentum ut turpis a, commodo adipiscing nisl. Vivamus luctus...

CSS

.highlight {
    background-color:red;
}
.navigation {
    position:fixed;
    background: #FFFFFF;
    padding:5px;
    border: 1px solid;
}
}

JavaScript

/**  scroll to element function **/

	function scrollToElement(selector, time, verticalOffset) {
	    time = typeof (time) != 'undefined' ? time : 500;
	    verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
	    element = $(selector);
	    offset = element.offset();
	    offsetTop = offset.top + verticalOffset;
	    $('html, body').animate({
	        scrollTop: offsetTop
	    }, time);
	}

	/**document ready**/
	$(document).ready(function () {
	    count = 0;
	    var max_length = $('.highlight').length;
	    /* scroll to 150px before .highlight with animation time of 1000ms */
	    $('.navigation a').click(function (e) {
            e.preventDefault();
            var id = $(this).prop('id');
            if(id === "next"){
                if (count < max_length) {
	                count++;
	            } else {
	                count = 1;
	                alert("reached start point");
	            }
            }
            else{
                if (count > 1) {
	                count--;
	            } else {
	                count = max_length;
	                alert("reached start point");
	            }            
            }
	        scrollToElement('.highlight:nth-child(' + count + ')', 1000, -150);
	    });
	});