Crear una animació d’scroll amb JQuery

Primerament, haurem de crear el botó:

<a href="#" class="scrollToTop">Scroll To Top</a>

A la classe .scrollToTop li podrem donar l’estil que vulguem per CSS.
En el nostre full de JavaScript, introduirem el següent codi:

$(document).ready(function(){
	
	//Comprova si la finestra està al Top, sinó mostra el botó
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});
	
	//Clicar l'esdeveniment per pujar fins al Top
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.