Réaliser un lien « top » qui apparaît au scroll de la page avec jQuery

C’est décidé, je vous proposerai de temps à autres quelques tutoriels relativement simples lorsque mes disponibilités me le permettront (ou plus simplement pour faire une petite pause dans mon travail).
Aujourd’hui nous allons voir comment réaliser assez simplement un lien « Retour en haut de page » qui apparait et disparait en fonction de la position du document dans la fenêtre.
Nous allons, bien entendu, utiliser la bibliothèque jQuery dans cette réalisation.

Avant-propos

L’utilisation de la bibliothèque jQuery implique pour le visiteur un téléchargement de celle-ci, qui, non-zippée peut-être assez lourde si vous ne l’utilisez que pour ajouter un petit lien « top ». Il vous faudra peser le pour et le contre. Si vous utiliser WordPress, il est généralement automatiquement intégré à la plupart des templates, autant en profiter !

L’idée

Ce que nous souhaitons c’est faire apparaître un lien qui mène en haut de page. Comme ce lien va apparaître et disparaître grâce à un script JavaScript, le mieux reste de construire complètement cet élément grâce à JavaScript.
Pourquoi ?
Si jamais le visiteur navigue sans JS activé, celui-ci ne sera pas gêné par un lien tout le temps présent.
Une autre solution consiste à le placer quelque part dans le code HTML, et à le récupérer et le positionner grâce à JS, mais ce n’est pas la solution que je vous présenterai aujourd’hui.

Le code par étapes

Petit rappel : nous utilisons jQuery.

1. Première étape donc, pour ceux qui n’auraient pas déjà chargé la bibliothèque, ajouter le script sur notre page. Pour sa position c’est au choix du développeur. Personnellement quand je le peux, je place les scripts juste avant </body> :

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

   Ici je charge jQuery depuis l’API Google, mais vous pouvez tout autant le charger depuis un dossier à vous.

2. Il nous faut maintenant écrire notre code JavaScript, pour ce tutoriel je choisis de le mettre directement entre balises script à la suite de l’appel de la bibliothèque jQuery.
   Vous pouvez très bien le placer dans un fichier .js externe et l’appeler de la même manière que la bibliothèque (cf. étape 1).

   <script type="text/javascript">
      $(document).ready(function(){
      //*
         Le code javascript sera mis ici
      *//
      });
   </script>');

   Cette première partie de code JavaScript signifie que nous allons exécuter les prochains scripts lorsque le document sera prêt.

3. Nous devons maintenant construire notre lien qui aura une forme tout à fait classique, mais qui sera ajouté grâce jQuery.
   A la place de mon commentaire précédent, nous allons progressivement écrire notre code :

   $('body').append('<a href="#top" class="top_link" title="Revenir en haut de page">Haut</a>');

   La fonction append(); permet d’ajouter un contenu dans l’élément ciblé à la suite de tout ce qu’il contient. Cet élément ici est body. Il suffit ensuite d’écrire ce que l’on souhaite ajouter entre guillemets.

4. Continuons en ajoutant à la suite les styles de notre lien. Ces styles peuvent écraser des styles existants de votre feuille de styles.

   $('.top_link').css({
   	'position'				:	'fixed',
   	'right'					:	'20px',
   	'bottom'				:	'50px',
   	'display'				:	'none',
   	'padding'				:	'20px',
   	'background'			:	'#fff',
   	'-moz-border-radius'	:	'40px',
   	'-webkit-border-radius'	:	'40px',
   	'border-radius'			:	'40px',
   	'opacity'				:	'0.9',
   	'z-index'				:	'2000'
   });
   

   Comme précédemment, nous utilisons une fonction, ici css(), qui permet d’attribuer des styles à l’élément ciblé. La cible étant le lien ciblé par sa classe : .top_link

5. Nous allons maintenant passer aux choses sérieuses (mais pas trop quand même) : la fonction qui vérifie la position de la fenêtre.
   Ce que nous souhaitons, c’est vérifier cette position dès que l’utilisateur scroll dans la page, en descente ou en montée.
   Dès que celui-ci arrive à un certain niveau clé dans la page (niveau défini en pixels du haut de la page), nous faisons apparaitre ou disparaitre le lien.
   Voici le code complet, je vous l’explique ensuite :

   $(window).scroll(function(){
   	posScroll = $(document).scrollTop();
   	if(posScroll >=550) 
   		$('.top_link').fadeIn(600);
   	else
   		$('.top_link').fadeOut(600);
   });

   Plutôt court n’est-ce pas ?

   • Prenons le plus simple en premier : fadeIn() et fadeOut().
     Il s’agit de deux fonctions d’animation qui font disparaître un élément (point de départ display: block; et de certaine opacité à un display: none; et d’opacité 0), ou apparaitre un élément en fondu (avec les effets inverses cette fois).
     Le chiffre renseigné entre parenthèses correspond à la vitesse (en millisecondes) de l’animation.
   • Reprenons ensuite à la première ligne de ce tronçon de code :
     En ciblant window (la fenêtre complète donc), nous faisons un contrôle sur scroll(). Dès que le visiteur scroll dans la page, on exécute la function
   • Cette fonction va simplement contrôler la position de la fenêtre par rapport au haut de l’élément ciblé. Pour effectuer ce contrôle nous utilisons la fonction (oui encore une) scrollTop(), qui sans paramètre renseigné renvoie la valeur en pixels (mais sans l’unité) de cette position. L’élément dont on vérifie la position dans window est document. Nous enregistrons cette valeur dans la variable posScroll
   • Enfin nous effectuons un contrôle conditionnel : « Si posScroll est supérieur ou égal à 550px alors nous faisons apparaitre le lien, sinon nous le faisons disparaitre ».

     Et c’est tout !

En espérant que ce tutoriel vous aura été utile et abordable.
Je vous invite à laisser un commentaire si vous avez des idées d’amélioration, des corrections à apporter sur ce tutoriel ou des problèmes dans son suivi.

A la prochaine, enjoy !

Liens utiles :
– Bibliothèque jQuery
– Documentation jQuery