JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cycle-posts">
    <a id="next" href="#">next</a>
    <a id="prev" href="#">prev</a>
</div>

<div id="container">
    <div class="current">My first post</div>
    <div>My second post</div>
    <div>My third post</div>
    <div>My fourth post</div>
</div>

CSS

#cycle-posts {
    position: fixed;
    top: 10px;
    right: 10px;
}

#container > div {
    height: 200px;
    width: 400px;
    margin: 20px 0;
    background: gray;
}

.current {
    color: red;
}

JavaScript

(function() {
    var scrollTo = function(element) {
        $('html, body').animate({
            scrollTop: element.offset().top
        }, 500);
    }
    $('#next').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .current');
        if ($current.index() != $('#container > div').length - 1) {
            $current.removeClass('current').next().addClass('current');
            scrollTo($current.next());
        }
    });
    $('#prev').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .current');
        if (!$current.index() == 0) {
            $current.removeClass('current').prev().addClass('current');
            scrollTo($current.prev());
        }
    });
})();