// style
.top {
width: 32px;
height: 32px;
position: fixed;
bottom: 50px;
right: 30px;
cursor: pointer;
z-index: 9;
background: url(images/top.png)no-repeat;
background-size: cover;
}
// div
<div class="top"></div>
// js
$(document).ready(function() {
$('.top').css('display','none');
var backButton = $('.top');
function backToTop() {
$('html,body').animate({scrollTop: 0 }, 800); }
backButton.on('click', backToTop);
$(window).on('scroll', function () {
if ($(window).scrollTop() > $(window).height()) {
backButton.fadeIn();
} else {
backButton.fadeOut();
}
});
});
