Arrow scroll back to top


Description: 




Kind:

CSS, jQuery


CSS:

a.back-to-top {
display: none;
width: 35px;
height: 35px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 15px;
bottom: 15px;
background: #787676 url("/wp-content/uploads/2016/04/arrow-up.png") no-repeat center 43%;
/*-webkit-border-radius: 30px;*/
/*-moz-border-radius: 30px;*/
/*border-radius: 30px;*/
}

a:hover.back-to-top {
background-color: #000;
}


Javascript:

// create the back to top button
$('body').prepend('.');

var amountScrolled = 300;

$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});

$('a.back-to-top, a.simple-back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});