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;
     height:500px;
 }
 /*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 cur_element_index = 0;
var elements = $(".section");
var els_length = elements.length;

function GetTopActiveElement(){
  var topItem = $('.section').toArray().reduce(function(curr, section) {
        var bottom = $(section).offset().top + $(section).height()
        var distance = (bottom - $(window).scrollTop())
        if (distance < 0) return curr
        return distance > curr.distance ? curr : {
            distance : distance,
            section : section
        }
    }, {section:null, distance:+Infinity}).section
  
  return topItem;
}

$('.btnNext').click(function () { 
   var cur_element = GetTopActiveElement();
   var index = ( jQuery.inArray( cur_element, elements ) );
   cur_element_index = index;
    
    cur_element_index++;
    if (cur_element_index >= els_length) cur_element_index = 0;
    $("html, body").animate({
        scrollTop: $(".section").eq(cur_element_index).offset().top - 20
    }, 700);
});

$('.btnPrev').click(function () {
   var cur_element = GetTopActiveElement();
   var index = ( jQuery.inArray( cur_element, elements ) );
   cur_element_index = index;
    
    cur_element_index--;
    if (cur_element_index < 0) cur_element_index = els_length - 1;
    $("html, body").animate({
        scrollTop: $(".section").eq(cur_element_index).offset().top - 20
    }, 700);
});