bottone back to top che compare quando torniamo su nella pagina. Uso font awesome per il simbolo #toTop #button #anchor #animate
.toTop {
position: fixed;
bottom: 30px;
right: 60px;
font-size: 30px;
background-color: #eee;
color: #e56b4b;
padding: 0 15px;
line-height: 45px;
display: none;
}
.toTop:hover {
background-color: #e56b4b;
color: #eee;
}
//animazione generica dei link in base alle ancore
var $root = $('html, body');
var extra = 0;
$('.animate').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top - extra
}, 700, function () {
window.location.hash = href;
});
return false;
});
//faccio comparire/scomparire il pulsante
$(window).scroll(function() {
if ($(this).scrollTop() >= 300) {
$('#scroll_top').stop().fadeIn(500);
} else {
$('#scroll_top').stop().fadeOut(500);
}
});
<!-- da mettere prima della chiusura del body -->
<a href="#top" id="scroll_top" class="toTop animate">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</a>