Le bouton haut de page

L'ergonomie joue beaucoup sur la fidélité des visiteurs ainsi que sur le taux de transformation d'un site Internet. Pour rendre plus facile la navigation sur des sites ayant des contenus longs, un bouton haut de page devient un atout indéniable.

Suite à plusieurs demandes concernant le bouton Retour en haut utilisé sur le site de l'agence SeoMix, voici un petit tutoriel pour en installer un sur une page statique ou sur le CMS WordPress.

Créer un bouton haut de page

Le bouton utilisé sur SeoMix fonctionne à l'aide de Jquery, de deux plugins de cette même librairie ainsi qu'un peu de HTML et de CSS. Vous aurez donc besoin d'un accès FTP à votre site, et d'un logiciel d'édition de fichiers (Notepad ++ est parfait).

Temps d'installation : moins de 10 minutes.
Difficulté : facile.

Le javascript

Pour installer ce bouton "Retour en haut", vous avons besoin 3 JavaScripts différents (que l'on va combiner en un seul) :

• Jquery 1.4.4
• Jquery easing
• Jquery Scroll To Top (ressource indisponible depuis la rédaction de l'article. Utilisez le fichier contenu à la fin de ce post)

PS : pour ceux qui ne veulent pas réaliser la manipulation des javascripts, celui-ci est disponible en fin d'article.

Commencez par télécharger la dernière version de Jquery, en version de production (c'est à dire compressée pour prendre moins de place). Créez ensuite un fichier javascript "toto.js", et ajoutez-y son contenu.

Placez ensuite ce fichier javascript dans votre code html juste avant la fin du </body>, comme ceci:

    <script type="text/javascript" src="toto.js"></script>
  </body>
</html>

Copiez ensuite dans toto.js le contenu du plugin Jquery Easing, qui va permettre de modifier la transition pour avoir un effet fluide et graphique.

Puis, nous allons également placer (toujours à la suite du fichier) le contenu du plugin Jquery Scroll To Top que voici:

  /* ------ jQuery Plugin: Scroll to Top ------ */
  $(function(){
    $.fn.scrollToTop=function(options){
      if(options.speed){var  speed=options.speed;}else{var speed="slow";}
      if(options.ease){var  ease=options.ease;}else{var ease="jswing";}
      if(options.start){var  start=options.start;}else{var start="0";}
      var  scrollDiv=$(this);$(this).hide().removeAttr("href");
      if($(window).scrollTop()>start){
        $(this).fadeIn("slow");}
        $(window).scroll(function(){
          if($(window).scrollTop()>start){
            $(scrollDiv).fadeIn("slow");
          } else{
            $(scrollDiv).fadeOut("slow");
          }
       });
       $(this).click(function(event){
         $("html,  body").animate({scrollTop:"0px"},speed,ease);
     });
    }
  });

Pour terminer, copiez le code suivant à la fin de votre fichier JS : c'est ce qui va permettre d'activer la fonctionnalité de retour en haut.

$(document).ready(function(){
  $("#IDdubouton").scrollToTop({
    speed:1800,
    ease:"easeOutBounce",
    start:250});
});

Vous remarquez trois lignes distinctes qui permettent de modifier l'apparition du bouton, ainsi que sa transition :

• speed : la durée de la transition, en secondes.
• ease : l'effet appliqué sur la transition.
• start : le nombre de pixels à partir duquel le bouton apparaît en descendant dans la page (ici, le bouton est visible quand les 250 premiers pixels de la page ne sont plus visibles).

Concernant le paramètre "ease", je vous invite à regarder cette page (Easing Plugin), et notamment le bloc "example" dans lequel vous pouvez tester tous les types de transitions qui existent.

Nous avons donc le code suivant dans toto.js :

• Jquery
• suivi de Easing
• suivi de Scroll To Top
• suivi de notre code

L'intégration html

Notre bouton est prêt à être ajouté. Je vous conseille de le placer en bas de page, juste avant votre javascript, ce qui nous donne:

    <button type="button" id="IDdubouton" title="Haut de page">Haut de page</button>
    <script type="text/javascript" src="toto.js"></script>
  </body>
</html>

Le bouton est fin prêt : un simple clic dessus et le tour est joué.

La mise en page

Sauf que notre bouton ne ressemble à rien en l'état, puisqu'il est placé en bas de page (donc inutile car on ne le voit pas tout le temps). Nous allons donc créer notre feuille de style (le fichier style.css) ou modifier celle qui existe déjà en ajoutant et personnalisant ce code:

#backtop{
 position:fixed;
 /* La couleur de fond*/
 background:#eff0d4;
 /*La bordure*/
 border:2px solid #125371;
 /* la longueur et l'espace autour du texte*/
 width:135px;
 padding:12px;
 /* On place le bloc en bas à droite*/
 right:30px;
 bottom:35px;
 /* On ajoute un bord arrondi pour les navigateurs compatibles*/
 border-radius:7px;-moz-border-radius:7px;-khtml-border-radius:7px;-webkit-border-radius:7px    }
#backtop:hover{
 /*On change le curseur de la souris au survol*/
 cursor:pointer;
 /*On change la couleur de fond au survol*/
 background:#125371;
 /*On change la couleur de la bordure au survol*/
 border:2px solid #eff0d4;
 /*On change la couleur de texte au survol*/
 color:#eff0d4}

Libre à vous de positionner et de donner la couleur que vous voulez à votre Haut de Page.

Si vous vous souhaitez faire disparaître également les pointillés qui apparaissent lors du clic sur votre bouton, copier/coller le code ci-dessous. Attention cependant : ces pointillés servent à la navigation au clavier afin de savoir où l'on se situe, notamment pour les personnes ayant un handicap. Libre à vous donc de mettre en place cette dernière partie ou non dans vos css.

:focus{outline:0}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{border:0;outline:none}

Le rendu final donnera donc :

Le haut de page sur WordPress

Maintenant, il s'agit de faire la même chose sur mon CMS préféré. Et c'est encore plus simple. Il faut juste vérifier plusieurs points dans le répertoire de votre thème :

• Pour savoir si Jquery est chargé ou non par votre blog WordPress, consulter le code source de votre page puis faites une recherche sur le terme Jquery (touches Ctrl + F). Si la recherche ne donne rien, il faudra l'inclure.
• Vérifiez dans le même temps si votre thème utilise bien un fichier style.css (ce qui est normalement le cas), et s'il fait déjà appel à un javascript existant (beaucoup plus rare).

Voici la méthode à suivre :

1 - copiez le contenu css dans celui de votre thème WordPress. Si le fichier n'existe pas (ce dont je doute), créez-le puis ajoutez-le dans le fichier header.php avec le code suivant:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

2 - Si vous avez déjà Jquery chargé dans votre header, copiez dans un fichier à part (ou dans le javascript déjà présent dans votre thème) le contenu de Easing, Scroll To Top et mon code. Si Easing est également chargé, ne prenez que les deux derniers.

2bis - Si vous n'avez pas déjà Jquery, faites comme la première méthode en copiant tout dans votre fichier javascript.

3 - Placez ensuite dans le répertoire de votre thème WordPress votre fichier toto.js

4- Modifiez ensuite le fichier footer.php comme ceci :

   <button type="button" id="backtop" title="Haut de page">Haut de page</button>
   <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/toto.js"></script>
  </body>
</html>

Voilà, le tour est joué : vous avez désormais un bouton haut de page sur votre blog WordPress.

Le javascript final du haut de page

Pour les feignants, voici le fichier javascript final, dont vous n'avez que la dernière ligne à changer: