Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc > Des mises en pages personnalisées >

Fiche n°15 : Retour rapide en haut de page

Objectif – Eviter de scroller pour retourner en début de page, surtout quand celle-ci est longue !


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 :
.top_link {
  position: fixed;
  top: 70%; right: 5%;       /* Positionnement ‘responsif’ */
  opacity: 0.4;
  display:none;              /* pas d’icône affichée d'emblée */
}
  • La fonction javascript qui suit décide de l’affichage de l’icône ; elle doit être enregistrée sous squelettes/javascript/hautdepage.js.
    Nota : le lien renvoie au div qui contient le bandeau :
$(document).ready(function() {
  $('body').append('<a href="#bandeau" class="top_link" title="Revenir en haut de page"><img src="squelettes/css/img/hdpg.png" /></a>');       
  $(window).scroll(function() {
     posScroll = $(document).scrollTop();
     if(posScroll >=450)   /* Affiche l’icône au-delà de 450px du haut */
        $('.top_link').fadeIn(600);
     else
         $('.top_link').fadeOut(600);
  });
});
  • Dans le fichier squelettes/inclure/head.html déclarer la fonction hautdepage.js en rajoutant la ligne suivante au-dessous du commentaire "Vos scripts" :
[(#REM) 6. Vos scripts ]
[<script src="(#CHEMIN{javascript/hautdepage.js})" type="text/javascript"></script>]