Accueil > LES OUTILS > SPIP, la doc > Mise en pages > Fiche n°15 : Retour rapide en haut de page

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 :
  • 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 :
  • Dans le fichier squelettes/inclure/head.html déclarer la fonction hautdepage.js en rajoutant la ligne suivante au-dessous du commentaire "Vos scripts" :