Fiche n°15 : Retour rapide en haut de page

Objectif – Revenir rapidement en haut de page sans avoir à scroller…


Lorsque les informations en cours d’affichage dépassent largement la hauteur de l’écran, il est plutôt fastidieux de scroller manuellement pour revenir tout en haut, là où se trouvent les dispositifs de navigation du site.

Comment traiter ce problème :

Dès que le défilement de l’écran dépasse un nombre déterminé de pixels depuis le haut de l’écran, faire apparaître une icône particulière. Un clic dessus ramènera au début de la page.

Installer le dispositif :

Le procédé associe une fonction javascript à quelques lignes de css et se décline en 4 points :

  • L’icône de retour qui aura été choisie s’intitule hdpg.png et se place sous le répertoire squelettes/css/img.
  • Dans le fichier perso.css il faut définir la classe top_link. Celle-ci donne à l’icône une position fixe et une opacité réduite pour garder lisibles les éléments qui pourraient se situer au-dessous :
  1. .top_link {
  2.       position: fixed;
  3.       top: 70%; right: 5%;  /* Positionnement ‘responsif’ */
  4.       opacity: 0.4;
  5.       display:none;         /* pas d’icône affichée d'emblée */
  6. }
  • La fonction javascript qui suit décide de l’affichage de l’icône ; elle doit être enregistrée sous squelettes/javascript/hautdepage.js :
  1. $(document).ready(function() {
  2. $('body').append('<a href="#top" class="top_link" title="Revenir en haut de page"><img src="squelettes/css/img/hdpg.png" /></a>');     
  3.     $(window).scroll(function() {
  4.         posScroll = $(document).scrollTop();
  5.         if(posScroll >=450)      /* Affiche l’icône au-delà de 450px du haut */
  6.                 $('.top_link').fadeIn(600);
  7.         else
  8.                 $('.top_link').fadeOut(600);
  9.     });
  10. });
  • Dans le fichier squelettes/inclure/head.html déclarer la fonction hautdepage.js en rajoutant la ligne suivante au-dessous du commentaire "Vos scripts" :
  1. [(#REM) 6. Vos scripts ]
  2. [<script src="(#CHEMIN{javascript/hautdepage.js})" type="text/javascript"></script>]