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

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: HTML, jQuery, UI

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 la suite de Tipsy, un plugin jQuery pour créer des tooltips comme sur Facebook. (102 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: CSS, Facebook, HTML, Javascript, jQuery, Plugin, Tooltips, Twitter

RBL Forms est un petit outil qui vous permet de créer et manipuler la création de vos formulaires pour jQuery.
(...)
Lire la suite de RBL Forms, un outils de création de formulaires pour jQuery (150 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Dynamique, Formulaires, Génération, jQuery, jQuery UI

Petite découverte du matin, un nouveau plugin pour jQuery qui permet de débugger les sélecteurs CSS utilisés dans notre application.

(...)
Lire la suite de jQuery Trace, ou comment débugger ses selecteurs CSS avec un plugin jQuery (94 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: CSS, Debug, jQuery, Plugin, Sélecteurs

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 la suite de Créer des classes Javascript avec jQuery (206 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Classes, Héritage, HTML, jQuery, PHP, Plugin, Plugins, POO

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 la suite de IxEdit, créer des animations et des intéractions avec jQuery sans une ligne de code (106 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: CSS, Générateur, HTML, IxEdit, Javascript, jQuery

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

(...)
Lire la suite de jQtouch, un plugin jquery pour vos sites internet mobiles (51 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Android, iPhone, jQuery, Palm Pre, Plugin, Safari, UI, WebKit

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 la suite de Parser du XML avec jQuery (216 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Ajax, HTML, jQuery, Parsing, Tutoriel, XML

Colorbox est un plugin jQuery de type Lightbox qui permet d’afficher du contenu avec HTML simple, Ajax, Iframe et même des photos.
(...)
Lire la suite de Colorbox, une Lightbox jQuery vraiment pratique (32 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Ajax, HTML, Iframe, jQuery, Lightbox, Plugin, Plugins

Comme sont nom l’indique, le plugin jQuery Round Corners permet d’arrondir les angles d’un ou plusieurs éléments sur votre page HTML.

(...)
Lire la suite de Arrondir les angles d’un élément HTML avec le plugin jQuery Round Corners (181 words)

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Bords Arrondis, Chrome, Dégradé, Firefox, Internet Explorer, jQuery, Opera, Plugin, Safari