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">^</div>
<div id="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;
}

#buttonUp {
    top: 10px;
}

#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;

$("#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);        
});