JSFiddle - React, Tailwind, and code Playground

by JokerMartini

HTML

<div class="section rowA">A</div>
<div class="section rowB">B</div>
<div class="section rowA">C</div>
<div class="section rowB">D</div>
<div class="section rowA">E</div>
<div class="section rowB">F</div>
<div class="section rowA">G</div>
<div class="section rowA">H</div>
<div class="section rowB">I</div>
<div class="section rowA">J</div>
<div class="btnScroll btnPrev noselect">&#8593;</div>
<div class="btnScroll btnNext noselect">&#8595;</div>

CSS

html {
     background-color: rgb(40, 40, 40);
 }
 .section {
     background-color:lightblue;
     margin: 40px 100px;
     padding:20px;
     height:300px;
     font-size:40px;
     display:block;
     text-align:center;
 }
 .rowA {
     background-color:lightgreen;
 }
 /*Scroll Buttons*/
 .btnScroll {
     position: fixed;
     background-color: rgba(0, 0, 0, .5);
     width:40px;
     height:40px;
     text-align:center;
     line-height:40px;
     color:white;
     border-radius:4px;
 }
 .btnScroll:hover {
     background-color: rgba(255, 255, 255, .2);
     cursor:pointer;
 }
 .btnScroll:active {
     background-color: rgba(255, 255, 255, .5);
     cursor:pointer;
     selection:none;
 }
 .btnPrev {
     bottom: 70px;
     right: 20px;
 }
 .btnNext {
     bottom: 20px;
     right: 20px;
 }
 .noselect {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

JavaScript

var curr_el_index = 0;
var els_length = $(".section").length;

$('.btnNext').click(function () {
    curr_el_index++;
    if (curr_el_index >= els_length) curr_el_index = 0;
    $("html, body").animate({
        scrollTop: $(".section").eq(curr_el_index).offset().top - 20
    }, 700);
});

$('.btnPrev').click(function () {
    curr_el_index--;
    if (curr_el_index < 0) curr_el_index = els_length - 1;
    $("html, body").animate({
        scrollTop: $(".section").eq(curr_el_index).offset().top - 20
    }, 700);
});