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

Comme vous le savez, Facebook est le plus gros réseau social sur internet. De plus il est vraiment remplit de petit script Javascript vraiment sympathique comme les popup modal mais aussi les tooltips (petite bulle d’aide).

Ce plugin jQuery vous permet de créer le même genre de tooltip mais sur vos applications.


Lire le reste de cet article »

• 7 commentaires

Quand on travaille avec du Javascript et plus particulièrement avec des frameworks comme jQuery, on a besoin de savoir créer des classes.

Lire le reste de cet article »

• 4 commentaires

Dans cet épisode, nous allons intégrer le design de notre application et nous allons aborder des routes assez pratique pour une application multilingue.

Lire le reste de cet article »

• 37 commentaires

IxEdit est un composant très spéciale conçu exclusivement pour jQuery. Ce composant permet de générer du code javascript (jQuery) à partir d’un outil de développement directement dans votre navigateur.

Lire le reste de cet article »

• 11 commentaires

Avec les sélecteurs jQuery, sélectionner un élément HTML n’a jamais été aussi facile. Mais ce que l’on oublie souvent c’est que le moteur des sélecteurs de jQuery fonctionne sur les DOM et donc on peut utiliser toutes les méthodes de jQuery avec du XML !

Lire le reste de cet article »

• 8 commentaires