JSFiddle - React, Tailwind, and code Playground

by Ganesh Salunkhe

HTML

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<a href="#" class="scrollup">Back To Top<i class = "fa fa-chevron-up middle"></i></a>

CSS

.scrollup {
	width: 250px;
	height: 40px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	display: block;
	text-align:center;
	vertical-align:middle;
	background-color: #6BAFBD;
	border:1px solid #6BAFBD;
	border-radius:10px;
	color:#fff;
}
.scrollup .middle{
	margin:12px;
}
.scrollup:hover{
	background-color: #BD8D6B;
	border:1px solid #BD8D6B;
	color:#000;
}

JavaScript

$(document).ready(function () {
				
				$(window).scroll(function () {
					if ($(this).scrollTop() > 100) {
						$('.scrollup').fadeIn();
						} else {
						$('.scrollup').fadeOut();
					}
				});
				
				$('.scrollup').click(function () {
					$("html, body").animate({
						scrollTop: 0
					}, 600);
					return false;
				});
				
			});