html Bottone back to top che比较quando torniamo su nella pagina。 Uso font awesome per il simbolo #toTo

Posted 2021-05-11

.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>