JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3-min.js"></script>
<div id="top"></div>
<div id="upDownArrow" class="arrowDown"><div class="arrow"></div></div>
<div id="buttonUp" class="buttonUp">^</div>
<div id="buttonDown" class="buttonDown">v</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div id="part1">
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
</div>
<div id="part2">
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div>row</div>
<div id="bottom"></div>

CSS

#upDownArrow {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 30px;
    height: 30px;
    background: #33B;
}

#part1 {
    background: #F00;   
}
#part2 {
    background: #0F0;  
}
#buttonUp, #buttonDown {    
    position: fixed;
    left: 50%;
    width: 30px;
    height: 30px;
    background: #999;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.buttonTop {
    background: #000 !important;
    color: #FFF;    
}

#buttonUp {
    top: 10px;
    display: none;
}

#buttonDown{
    bottom: 10px;    
}

#upDownArrow:hover {
    background: #99F;
    cursor: pointer;
}

#upDownArrow.arrowDown:hover .arrow {
    border-top-color: #99F;   
}

#upDownArrow.arrowUp:hover .arrow {
    border-bottom-color: #99F;   
}

#upDownArrow.arrowUp .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-bottom: 15px solid #33B;
    top: -30px;
}

#upDownArrow.arrowDown .arrow {
    position: absolute;
    border: 15px solid transparent;
    border-top: 15px solid #33B;
    bottom: -30px;
}

JavaScript

$('#upDownArrow').click(function() {
    if($(this).hasClass("arrowUp")) {
        $.scrollTo( '#top', 500); // scroll to top      
        $(this).removeClass("arrowUp");
        $(this).addClass("arrowDown");
    } else {
        $.scrollTo( '#bottom', 500); // scroll to bottom
        $(this).removeClass("arrowDown");
        $(this).addClass("arrowUp");     
    }
            
});


var steps = ["top","part1","part2","bottom"]; // this could get loaded via jquery dynamically...

var currentPosition = 0;

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() >= $(document).height()-30) {
       $("#buttonDown").text("^").removeClass("buttonDown").addClass("buttonTop");
   } else if($(window).scrollTop() <= 30) {
       $("#buttonUp").hide();
   } else {
       $("#buttonUp").show();
       $("#buttonDown").text("v").removeClass("buttonTop").addClass("buttonDown");
   }
});

$(".buttonTop").click(function() {
    currentPosition = 0;
    $.scrollTo('#top',500);    
});

$(".buttonUp").click(function() {
    debugger;
    if(currentPosition == 0) {
        currentPosition = steps.length-1;
    } else {
        currentPosition --;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});

$(".buttonDown").click(function() {
    debugger;
    if(currentPosition == steps.length-1) {
        currentPosition = 0;
    } else {
        currentPosition++;
    }
    $.scrollTo('#'+steps[currentPosition],500);        
});