JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixWrap">
<ul class="navigation">
    <li><button data-index="1">content1</button></li>
    <li><button data-index="2">content2</button></li>
    <li><button data-index="3">content3</button></li>
    <li><button data-index="4">content4</button></li>
    <li><button data-index="5">content5</button></li>    
</ul>

<p class="buttons">
   <button id="fade">prev</button>
   <button id="fade1">next</button> 
</p>
</div>    

<div id="content1" class="content">/* content 1 */</div>
<div id="content2" class="content">/* content 2 */</div>
<div id="content3" class="content">/* content 3 */</div>
<div id="content4" class="content">/* content 4 */</div>
<div id="content5" class="content">/* content 5 */</div>

CSS

.content {
    height:600px;
    width:500px;
    border:1px solid red;
    margin:auto;
    text-align:center;
}
.fixWrap {position:fixed; width:500px;}
.navigation {position:absolute}
.navigation li {list-style-type:none;}
.navigation button{color:#000}
.navigation button:hover{color:red; text-decoration:none}
.buttons {position:absolute; right:0;}
.navigation button.active{color:#f00;}
#fade{display:none;}

JavaScript

var itemIndex = 1;
function scrollToContent() {

    //dont allow zero or greater than 5
    if (itemIndex <= 1) {
        itemIndex = 1;
        $('#fade').hide();
    }
    else{
        $('#fade').show();
    }
    if (itemIndex >= 5) {
        itemIndex = 5;
        $('#fade1').hide();
    }
    else{
        $('#fade1').show();
    }
    //scroll
    $('html, body').animate({
        scrollTop : $('#content' + itemIndex).offset().top
    }, 2000);
    //add & remove active class name
    $('button.active').removeClass('active');
    $('.navigation li:nth-child(' + itemIndex + ') button').addClass('active');
}

//click handlers
function clickFuncs() {
    $(".navigation button").click(function() {
        itemIndex = $(this).attr('data-index');
        scrollToContent();
    });

    $('#fade1').click(function() {++itemIndex;
        scrollToContent();
    });

    $('#fade').click(function() {--itemIndex;
        scrollToContent();
    });
}


$(document).ready(function() {

    //setup click handlers
    clickFuncs();

});