하/중/상 스크롤

<style>
.go-up {position: fixed;right:25px;bottom:158px;border-radius: 5px;color: rgba(80,80,80,0.3);text-align: center;width: 25px;height: 25px;font-size: 16px;background-color:rgba(80,80,80,0.0);z-index: 999;display: none;}
.go-up:hover{color:rgba(0,0,255,0.6);}
.go-center {position: fixed;right:25px;bottom:135px;border-radius: 5px;color: rgba(80,80,80,0.3);text-align: center;width: 25px;height: 25px;font-size: 10px;background-color:rgba(80,80,80,0.0);z-index: 999;display: none;}
.go-center:hover{color:rgba(0,0,255,0.6);}
.go-down {position: fixed;right:25px;bottom:120px;border-radius: 5px;color: rgba(80,80,80,0.3);text-align: center;width: 25px;height: 25px;font-size: 16px;background-color:rgba(80,80,80,0.0);z-index: 999;display: none;}
.go-down:hover{color:rgba(0,0,255,0.6);}
</style>

<a href="#" class="go-up"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#" class="go-center"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" class="go-down"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>

<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
    $( window ).scroll( function() {
        if ($(this).scrollTop() > 100 ) {
            $('.go-up').fadeIn();
   $('.go-center').fadeIn();
   $('.go-down').fadeIn();
        } else {
            $('.go-up').fadeOut();
   $('.go-center').fadeOut();
   $('.go-down').fadeOut();
        }
 });
 });
 
    $(function() {
        $(".go-up").on("click", function(e) {
            e.preventDefault();
            $("html, body").animate({scrollTop:0}, '500');
            return false;
        });
        $(".go-center").on("click", function(e) {
            e.preventDefault();
            var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
            $("html, body").animate({scrollTop:middle_pos}, '500');
            return false;
        });
        $(".go-down").on("click", function(e) {
         e.preventDefault();
         var scrollBottom = $("html,body").scrollTop + $("html,body").height();
            $("html, body").animate({scrollTop:$(document).height()}, '500');
            return false;
        });
    });
</script>