JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div id="back-to-top">
            <i class="fa fa-chevron-up"></i>
        </div>
  </div>
<footer>
wevweev    
</footer>

CSS

.container{
    height:800px;
}
#back-to-top{
	position:fixed; 
	z-index: 999; 
	display:none; 
	bottom:70px; 
	right:15px; 
	cursor:pointer;
}
#back-to-top i{
	width: 50px; 
	height: 50px; 
	display:block; 
	color: #fff; 
	background: #26ADE4 ; 
	text-align:center; 
	font-size:16px; 
	line-height: 50px; 
	border-radius: 5px;
	-webkit-transition:  .3s all;
	   -moz-transition:  .3s all;
	    -ms-transition:  .3s all;
	     -o-transition:  .3s all;
	        transition:  .3s all;
}
#back-to-top i:hover{background:#333;}
footer{
    height:200px;
    background:red;
}
}

JavaScript

var limit     = $(window).height()/3,
	$backToTop = $('#back-to-top');

$(window).scroll(function () {
	if ( $(this).scrollTop() > limit ) {
		$backToTop.fadeIn();
	} else {
		$backToTop.fadeOut();
	}
});

// scroll body to 0px on click
$backToTop.click(function () {
	$('body,html').animate({
		scrollTop: 0
	}, 1500);
	return false;
});