Adding scroll up & down arrow into DIV

Down arrow is shown to let the reader know there is content below, while up arrow is shown to allow reader to jump back to top

HTML

<div id="container">
    <div id="content">
    	<p>....</p>
    </div>
    <div id="scroll"><div id="backtobottom"><i class="fa fa-angle-double-down" aria-hidden="true"></i></div><div id="backtotop"><i class="fa fa-angle-double-up" aria-hidden="true"></i></div></div>
</div>

CSS

#container {
    width: 100%;
    position: relative;
    float: none;
    height: 200px;
    overflow-y: scroll;
}

#content {
    width:100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}

.fa {
    font-size: 40px;
}

#scroll {
    z-index: 200;
    position:absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    }

#scrolltoup {
    position: absolute;
    bottom: 5px;
    right: 15px;
    height: 40px;
    width: 40px;
}

#scrolltobottom {
    position: absolute;
    bottom: 5px;
    right: 35px;
    height: 40px;
    width: 40px;
}

Javascript

$('#content').scroll(function() {
    var total = $(this)[0].scrollHeight - $(this).height();
    var opacity = $(this).scrollTop() / total;
    $('#backtotop').css('opacity', opacity);
    $('#backtobottom').css('opacity', 1-opacity);
});

$('#backtotop').click(function() {
    $('#content').animate({
        scrollTop: 0
    }, 800);
});

$('#backtobottom').click(function() {
    $('#content').animate({
        scrollTop: $("#content")[0].scrollHeight
    }, 800);
});

Dependent libraries: jQuery, Font-awesome, Bootstrap