Ajouter un bouton “back to top” sans plugin

Franchement, je ne sais pas vous, mais, qu’est-ce que ça m’agace les sites qui n’ont pas de “back to top”. J’arrive en bas de la page, et paf, il me faut scroller pour revenir en haut. Il faut bien se rendre à l’évidence que ce n’est pas du tout user-friendly. Et le pire dans tout ça, c’est que beaucoup de thèmes gratuits ne le proposent que dans leur version premium. Ok, il y a des plugins qui peuvent pallier ce manque, mais je préfère m’en passer pour une histoire de performance. Alors, j’ai trouvé une solution pour ajouter un bouton “back to top” sans plugin.

Ça vous intéresse ?

Sans plus attendre, je vous explique tout.

Qu’est-ce qu’un bouton “back to top” ?

Tout d’abord, le bouton “Back to top” se retrouve sous différentes dénominations :

• Scroll to top
• Retour en haut
• Retour haut de page

Il est utile essentiellement pour l’expérience utilisateur. En effet, il évite le scroll manuel pour retourner en haut de la page.

Imaginez que vous êtes à la fin d’un looong article ou d’une grande page e-commerce… C’est quand même plus sympa de pouvoir retourner au début du contenu juste en cliquant sur un bouton.

Comment ajouter un bouton “back to top” sans plugin ?

Il faut reconnaître que l’on trouve pas mal d’exemples de codes pour ajouter un bouton “back to top”. Mais, pour en avoir testé plusieurs, je préfère celui-ci.

En effet, il est extrêmement simple à mettre en place. Car il suffit juste de le copier-coller dans le fichier functions.php de votre thème enfant.

/* Back To Top */

add_action( 'wp_footer', 'back_to_top' );
 function back_to_top() {
 echo '<a id="totop" href="#" data-btn-alt="Top">⬆︎</a>';
 }

add_action( 'wp_head', 'back_to_top_style' );
 function back_to_top_style() {
 echo '<style type="text/css">
 #totop {
 position: fixed;
 right: 30px;
 bottom: 30px;
 display: none;
 outline: none;
 text-decoration: none;
 font-size: 26px;
 background: rgba(42, 64, 67, 0.4);
 padding: 3px 12px 3px 12px;
 border-radius: 5px;
 box-shadow: 0 0 1px #000;
 color: #fff;
 z-index: 100;
 }
 
 #totop:hover {
 background: rgba(42, 64, 67, 1);
 }
 
 #totop:hover:after{
 content: attr(data-btn-alt);
 font-size: 16px;
 color: #fff;
 padding-left: 5px;
 }
 </style>';
 }

add_action( 'wp_footer', 'back_to_top_script' );
 function back_to_top_script() {
 echo '<script type="text/javascript">
 jQuery(document).ready(function($){
 $(window).scroll(function () {
 if ( $(this).scrollTop() > 1500 ) 
 $("#totop").fadeIn();
 else
 $("#totop").fadeOut();
 });

$("#totop").click(function () {
 $("body,html").animate({ scrollTop: 0 }, 800 );
 return false;
 });
 });
 </script>';
 }

Dès que l’on insère le code, on peut constater que le bouton est visualisable.

Voici son design avant personnalisation :

Explication et personnalisation possible du code

Ok, vous n’êtes pas développeur(se), rassurez-vous, moi non plus, mais, j’aime bien tester plein de trucs.

Alors, pour info, echo ⬆︎‘; est le code qui montre la flèche utilisée pour le bouton. Il ne s’agit pas d’une image, mais d’une émoticône à copier-coller. Pour rappel, l’encodage Unicode (UTF-8) intègre désormais les émoticônes en tant que caractère. Cela signifie que toute application compatible avec Unicode peut afficher les émoticônes, sous réserve que la police de caractère soit compatible. La flèche est donc assimilée à du texte, c’est la raison pour laquelle vous pouvez voir le a devant l’id : a id=”totop”

id=”totop”, quant à lui, est l’identifiant unique créé pour pouvoir styliser le bouton.

À partir de là, tout est “stylisable”.

En effet, vous pouvez modifier la taille de la police font-size, la courbure de la bordure, border-radius et la couleur de l’émoticône (assimilée à du texte), color.

Mais aussi, plein d’autres choses, par exemple :

Si vous souhaitez garder la couleur de l’arrière-plan, mais simplement en changer l’opacité, il suffit de jouer avec le 0.4 ici : background: rgba(42, 64, 67, 0.4);.

Pour changer la couleur de l’arrière-plan, il vous faut modifier la valeur rgba (42, 64, 67, 0.4 ), soit pour une autre en rgba, soit pour une couleur rgb si vous ne souhaitez pas de transparence.

Vous pouvez faire de même pour l’apparence en hover, c’est à dire au survol de la souris, pour cela, modifiez les paramètres pour totop:hover.

Il est également possible de régler le moment où le bouton apparaît pendant le défilement, pour cela, il suffit de remplacer le scrollTop 1500 par un autre nombre ici : if ( $(this).scrollTop() > 1500 ).

Ensuite, pour régler la vitesse entre le clic sur le bouton et le moment où la page arrive en haut, ajustez le nombre 800 par un autre ici : $(“body,html”).animate({ scrollTop: 0 }, 800 );.

Et enfin, pour ajuster la taille de la boîte, ajustez le padding (top, right, bottom, left) 3px 12px 3px 12px par d’autres chiffres à votre convenance ici : padding: 3px 12px 3px 12px;.

Par exemple, en modifiant les couleurs pour les assortir à mon site, la taille de l’émoticône, l’arrondi de la bordure et les padding pour arrondir le bouton, sans oublier la couleur au survol, comme ceci :

font-size: 30px;
background: #CF2E87;
padding: 0px 20px 0px 20px;
border-radius: 90px;

#totop:hover {
background: #04D9D9;
}

Globalement, voilà ce que ça donne :

Dans l’ensemble, je crois que j’ai fait le tour des possibilités de personnalisation, alors, à vous de jouer maintenant.

Votre avis sur le bouton de retour en haut (back to top)

Pour conclure, voilà, c’était mon astuce du jour, j’espère qu’elle pourra vous être utile.

Finalement, que pensez-vous des sites sans bouton “back to top” ? Est-ce que ça vous gêne autant que moi ?