<style>
.back-to-top {
color:black;
position: fixed;
z-index: 999;
bottom: 25rem;
right: 1rem;
display:none;
}
.back-to-top:active, .back-to-top:focus, .back-to-top:hover {
text-decoration: none;
color:#afb3b0;
}
.back-to-top i {
font-size: 3em;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("body").append("<a href='#' class='back-to-top'><i class='fa fa-arrow-circle-up' aria-hidden='true'></i></a>"), 
$(function toTop() {
$(window).scroll(function() {
$(this).scrollTop() > 400 ? $(".back-to-top").fadeIn() : $(".back-to-top").fadeOut()}), $(".back-to-top").click(function() { 
return $("html, body").animate({scrollTop:0},500);
});
});
</script>