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

Dans cet épisode, nous allons voir comment gérer les formulaires avec le Zend Framework pour créer la page d’inscription de WatchMyDesk.

Cette partie va être assez compliquée et un peu longue. Accrochez vous !

Lire le reste de cet article »

• 34 commentaires

Bonjour à tous,

De plus en plus de personne me demande comment ajouter du code dans les commentaires postés sur Dator.fr.

Voici un tutoriel écrit et tutoriel vidéos que vont vous permettre d’agrémenter vos commentaires avec du code sans soucis.


Lire le reste de cet article »

• 6 commentaires

Installation multisite de Drupal

L’un des atouts majeur de Drupal réside dans la possibilité de faire du multisite, c’est à dire d’avoir plusieurs site qui tournent sur une seule installation de Drupal et surtout sur une seule base de donnée. Lire le reste de cet article »

• 15 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 »

• 36 commentaires