Dator Blog

Cette idée m’est venu quand je suis tombé sur le site de Hitomi Studio, une agence de création de site e-commerce sur Magento. Comme vous pouvez le voir quand vous parcourez le contenu, à une certaine position de la barre de défilement, un élément HTML apparait pour vous ramener vers le haut de la page.

Les sources étant compressées et vu qu’ils utilisent Mootools, je me suis demandé si c’était simple de le refaire avec jQuery.

$(function(){
        // Ajout de l'élément HTML en le cachant (au départ)
	$('
Retour en haut

').appendTo('body').css({opacity: 0});
	$(window).scroll(function(){ // On ajoute une fonction quand on défile dans le site

		// On récupère la position de la barre de défilement par rapport à notre fenêtre
		var scrollTop = $(window).scrollTop();
                // On ajoute une fonction au clique de notre élément.
		$('#scrolltotop a').click(function(){
	           // On lance l'animation pour retourner en haut de la page
	           $('html,body').stop().animate({scrollTop: 0}, 'slow');
		});

		// On récupère notre élément
		var div = $('#scrolltotop');

		if(scrollTop >= 300){ // Si on dépassé les 300 pixels
			if(div.css('opacity') == 0){ // et si la div est cachée
				div.stop().animate({opacity: 1}, 500); // On affiche l'élément
			}
		}else{

			// Sinon, on cache la div si celle ci est visible.
			if(div.css('opacity') > 0){
				div.stop().animate({opacity: 0}, 500);
			}
		}
	});
       // On lance l'évènement scroll un première fois au chargement de la page
	$(window).scroll();
});

Avec cette méthode, vous pouvez donc laisse la possibilité à l’utilisateur de retourner en haut de votre site sans utiliser la molette de sa souris et cela d’une manière très fluide et agréable !

Démonstration

• 15 commentaires

La petite découverte du jour est jQtouch, un plugin jQuery pour créer des applications web pour iPhone, Palm Pre, Android …

Lire le reste de cet article »

• 8 commentaires

jQuery Splitter est un plugin qui permet de séparer votre contenu en plusieurs parties .

Vous pouvez séparer votre contenu :

• Horizontalement
• Verticalement

Ce plugin est vraiment très pratique pour ceux qui recherche ce genre d’effet graphiques pour leurs application.

• 6 commentaires