HTML:
<button href="#" class="scrollToTop">Top</button>
CSS:
scrollToTop{
display:none;
position:fixed;
bottom:20px;
right:30px;
z-index:99;
font-size:18px;
border:none;
outline:none;
background-color:red;
color:white;
cursor:pointer;
padding:15px;
border-radius:5px;
}
.scrollToTop:hover{
background-color: #706907 ;
}
Jquery:
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 1) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},100);
return false;
});
});
</script>