JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <article>
        	<h3>Article 1</h3>

        <p>Article content</p>
    </article>
    <article>
        	<h3>Article 2</h3>

        <p>Article content</p>
    </article>
    <article>
        	<h3>Article 3</h3>

        <p>Article content</p>
    </article>
    <article>
        	<h3>Article 4</h3>

        <p>Article content</p>
    </article>
</div>
<div id="back">	<a href="javascript: scrollBack();">Back</a>

</div>
<div id="next">	<a href="javascript: scrollNext();">Next</a>

</div>

CSS

html, body {
			    width: 100%;
			    height: 100%;
			    margin: 0px;
			    padding: 0px;
			}
			body {
			    background: #cccccc;
			    color: #000;
			}
			#container {
			    display: block;
			    width: 300px;
			    height: 200px;
			    margin: 00 auto;
			    margin-top: 10%;
			    overflow: hidden;
			}
			article {
			    display: block;
			    margin: 00 auto;
			    width: 300px;
			    height: 200px;
			}

JavaScript

var items = $("#container>article");
var currentItem = 0;
window.scrollBack = function() {
    var cdiv = items[currentItem];
    if (currentItem == 0) {
        return false;
    } else {
    var pdiv = items[currentItem - 1];
        $('#container').animate({
		            scrollTop: $(pdiv).offset().top
		        }, 750);
		        currentItem--;
		        $("#next").style = "visibility: visible";
		        if (currentItem == 0) {
		            $("#back").style = "visibility: hidden";
		        } else {
		            $("#back").style = "visibility: visible";
		        }
		        return true;
		    }
		}

		window.scrollNext = function() {
		    var cdiv = items[currentItem];
		    if (currentItem == items.length - 1) {
		        return false;
		    } else {
		        var ndiv = items[currentItem + 1];
		        $('#container').animate({
		            scrollTop: $(ndiv).offset().top
		        }, 750);
		        currentItem = currentItem + 1;
		        $("#back").style = "visibility: visible";
		        if (currentItem == (items.length - 1)) {
		            $("#next").style = "visibility: hidden";
		        } else {
		            $("#next").style = "visibility: visible";
		        }
		        return true;
		    }
		}