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