Le bouton haut de page

Publié le 21 janvier 2011 Développement WordPress
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 :

Bouton haut de page
Le bouton haut de page

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:

Daniel Roch

Conférencier, auteur, consultant et expert SEO WordPress, CEO de SeoMix et SEOKEY

32 Commentaires

bruno Le 21 janvier 2011 à 15h02

Bravo pour l’article, ça va sur mes sites ce week end ;-) Jusqu’à maintenant j’utilisais le bon vieux #haut mais là c’est quand même plus sexy.

Namasteo Le 21 janvier 2011 à 15h11

Le bouton haut de page est un vrai plus pour l’utilisateur, notamment pour des pages à riche contenu ou les blogs.

Et les plugins sont très facile à installer !

DJib's Le 21 janvier 2011 à 19h17

Quel est l’interet de remettre jquery alors qu’il est déjà présent dans le header des blogs wordpress

Valentin Le 21 janvier 2011 à 19h40

Super article qui définit bien l’utilisation d’un tel bouton (mais je suis contre son utilisation, je salut juste le fait d’avoir prit la démarche de présenter cette utilisation).

Après ce n’est que mons avis, mais je trouve cela complètement inutile pour la navigation et ce n’est rien de plus qu’un moyen d’alourdir la page (pas énorme c’est sur, ça doit se calculer en ms).

Trois scripts, fusionnés en un seul pour 86Ko et juste pour un effet de défilement ;p

Malheureusement, ce n’est pas un plus pour l’ergonomie, mais plus un gadget personel.

L’utilisation d’une ancre (@bruno) est plus simple et bénéfique pour tout le monde.

Par contre, ce que je trouve très bien pour l’ergonomie d’un site et surtout pour sa navigation est l’effet utilisé. Ce défilement presque infini est utile si à chaque niveau important de la navigation (verticale) on y retrouve un menu. On peu avoir un exemple de navigation et d’ergonomie sur le portail envato –> http://envato.com/

Masamune Le 21 janvier 2011 à 20h09

Mis en place sur mon blog, il me reste plus qu’a adapter le CSS. Merci beaucoup ;)

ps : Quel est l’intérêt d’avoir JQuery déjà activé si on remet le code dans le fichier JS ?
PPS : Tu utilise quel plugin pour insérer ton code ? Le mien est vachement moins bien ^^’

Daniel Roch Le 21 janvier 2011 à 22h34

@Masamune: pour afficher mon code, j’utilise SynHighlighter avec plusieurs modifications personnelles

@valentin : tout à fait d’accord. Mais comme Jquery doit souvent être chargé pour d’autres fonctionnalités courante (certains formulaire de contact, des sliders, …), il ne reste alors plus que 4-5ko à télécharger en plus (téléchargés une seule fois par utilisateur avec une bonne mise en cache). Et comme mes articles sont parfois un peu long, c’est un bouton plutôt utilisé selon mes statistiques. ;)

Concernant les questions de Jquery et de WordPress, j’indique justement dans l’article qu’il faut vérifier s’il est chargé ou non pour savoir s’il faut l’ajouter dans le javascript, car certains thèmes ou plugins le chargent automatiquement, tandis que d’autres peuvent se charger de le désactiver… (allez comprendre…).

Pascal Le 21 janvier 2011 à 23h27

Bravo pour le tutoriel! Heureusement qu’on a des gars comme vous qui partagent leur savoir aussi librement! J’ai déjà plusieurs applications du «Haut de page» pour le remodelage de mon site avec WordPress.
Merci beaucoup!

Djib's Le 23 janvier 2011 à 12h31

Je viens de regarder ce poste en effectivement c’est pas mal je m’etait déja demander comment faire sans utiliser #name

cool

Johan Le 24 janvier 2011 à 9h52

Hello !
Pas mal l’article surtout la partie sur l’easing que je n’utilise pas sur ma solution…
Et je suis d’accord avec Daniel, en général ce bouton est pas mal utilisé, lorsque je le mesurais c’était facilement 1 visiteur sur 5 qui l’utilisait.

PS : Tes tabindex ne sont pas bon dans les commentaires Daniel… On passe de 4 pour le champ site à 1 pour le textarea comment.

Maximilien Le 24 janvier 2011 à 12h34

Super billet ! J’utilise également le même concept sur mon portfolio, j’aime beaucoup :)

Daniel Roch Le 24 janvier 2011 à 13h43

@Johan : bien vu pour les tabindex. Il faut que je corrige.

Masamune Le 25 janvier 2011 à 15h23

Heya ! Pour la mise en place et l’utilisation du bouton ca marche impec, seul soucis ca me désactive mes lightboxs avec ton code.

J’ai essayé de rajouter uniquement le code utile (Easing + back to Top + document.ready, et même juste back to top + doc.ready) vu que j’ai déjà JQuery d’activé, mais le bouton ne fait plus rien :/

J’ai jeté un coup d’œil au code que tu proposes mais il semble compressé de partout, impossible de virer uniquement ce qui est inutile. Help ?

EDIT : Problème résolu via : http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

Un petit coup de firebug, des essais à l’arrache et j’ai réussi a faire cohabiter tout ce petit monde :)

Désolé pour le dérangement

Daniel Roch Le 25 janvier 2011 à 15h44

Je viens de mettre à jour mon article avec l’ajout d’un plugin WordPress. ;)

@Masamune : content de voir ton problème résolu

Cédric G. Le 27 janvier 2011 à 21h22

Article très sympa… que je n’avais pas attendu pour intégrer à mon blog ton ascenseur ;-)

(largement tuné bien entendu, mais je m’étais inspiré du tiens pour sa réalisation !)

Annuaire généraliste de qualité Le 29 janvier 2011 à 1h52

très bonne solution, je vais pouvoir remplacer toute mes ancres qui date de 2000.lol. la honte.

Laurent Mottet Le 10 mars 2011 à 21h24

Bonjour Daniel,

Cette méthode est fort compliquée pour faire un simple bouton haut de page. Pour ma part, j’utilise simplement un div positionnée en CSS position:fixed avec un Z-index. Léger et efficace.

Sinon un bon post et surtout un très bon site.

leglaude51 Le 16 mai 2011 à 20h01

Bonjour,
Très bon script, et merci.
Moi, j’ai l’habitude de travailler avec WP, mais là j’ai dû refaire un site en PHP et Html.
J’ai donc utilisé votre script, mais une question:
Peut-on avoir la possibilité que le bouton s’affiche au milieu de la page, comme dans « Scroll to top » pour WP?

Merci d’avance

Daniel Roch Le 17 mai 2011 à 7h47

@leglaude51 : pour placer au milieu ce bouton haut de page, il faut jouer avec les CSS. Regarde sur Google : il a y pas mal de tutoriels qui explique comment on peut centrer facilement des éléments.

leglaude51 Le 17 mai 2011 à 17h37

@Daniel Roch
Oui, merci du conseil.
Il s’affiche, mais il ne disparaît pas complètement!
De plus, j’ai beau cliquer dessus, ma page ne remonte pas!!!
l’url de la page test:
computer-solution.ch/page.php

j’ai trouvé ce qui ne va pas! La feuille de style bloque le script… Si je la supprime, le script fonctionne! Mais voilà, je ne peux pas la supprimer, alors…
Que faire? Une astuce, une idée? D’avance un grand merci

Daniel Roch Le 18 mai 2011 à 9h22

Après rapide test de la page, il semblerait que le bug provienne du script utilise, qui place le bouton haut de page sous le reste du contenu, ce qui rend impossible le fait de cliquer dessus…

Merqur Le 19 juin 2011 à 22h56

Merci :)

patrick Le 15 mars 2012 à 11h56

Merci pour le tutoriel. Je suis surtout content de voir, enfin (je passe pas mon temps à chercher mais quand même), quelqu’un qui ne rajoute pas un fichier js et un css en plus, histoire de demander 70 requetes au serveur pour une page web !

Noob Le 05 octobre 2012 à 12h51

Tuto en mousse, ne marche plus !

Si ça ce trouve les bibliothèques ont été mises à jour et tout est en vrac.

Une mise à jour de ce topic est requise SVP !

Merci !!

Daniel Roch Le 06 octobre 2012 à 9h19

Pour le moment, le bouton haut de page de SeoMix applique toujours à la lettre ce qui a été indiqué dans ce tutoriel. Revérifiez point par point que vous n’avez pas fait d’erreur ou que vous n’avez pas d’incompatibilité avec votre thème ou d’autres plugins.

Loic Le 26 mars 2013 à 18h34

Ce tuto est simple, bien rédigé et très complet. Je tiens néanmoins à signaler que le lien du pack « feignants » ne fonctionne pas. Merci pour le temps que tu as consacré pour ça!

    Daniel Roch Le 27 mars 2013 à 9h37

    C’est corrigé

Dan Leran Le 17 juillet 2013 à 14h51

Bonjour, je suis très intéressé par ce script, une petite question comment faire la même chose, créé un bouton mais en allant vers le bas ???
Exemple: quand nous sommes en haut de page, pouvoir aller directement en bas de la même manière

Merci de votre réponse
Cordialement

Léa Le 23 juillet 2013 à 13h35

Superbe effet… Sauf que non fonctionnel sur wordpress chez moi en local. Le plugin WP Topper ne fonctionne pas non plus : le bouton apparaît bien, mais rien ne se passe au clic. Dommage…

Connors Le 17 septembre 2013 à 17h45

Bonjour,

Je suis un débutant dans le monde du Jquery et je suis tombé par hasard sur votre tutoriel que j’essaye de reproduire sur mon site « non-wordpress ».

Seulement j’ai un petit souci avec la partie concernant la transition du bouton vous dites :

« 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). »

Seulement après avoir été sur http://gsgd.co.uk/sandbox/jquery/easing/

Je n’ai pas trouvé comment modifier la transition du bouton, on dirai que cette fonction ne s’applique qu’a la transition de l’EFFET du bouton après clique.

De plus mon bouton disparaît d’un seul coup et non pas sur un effet de fondu.

Avec-vous un idée d’où peut provenir le problème ?

En vous remerciant,

    Daniel Roch Le 19 septembre 2013 à 15h40

    Il semblerait que le plugin easing ait été modifié, et que donc cette partie du tutoriel ne fonctionne plus malheureusement. Regardez sur le site de Easing pour savoir comment utiliser la nouvelle version.

Stan O'Connors Le 19 septembre 2013 à 15h43

Très bien j’ai finalement réussi par je ne sais quel miracle à obtenir ce que je souhaitais.

Mais je vous remercie pour votre réponse rapide !

Damien Le 17 avril 2014 à 9h59

Ne semble pas fonctionner sur Internet Explorer. Comment faire ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *