Ajouter un bouton “back to top” sans plugin

créer un bouton "back to top" sans plugin
Partagez !

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, personnellement, je préfère me passer de plugin quand je le peux pour une histoire de performance. Alors, j’ai trouvé une soluce pour ajouter un bouton “back to top” sans plugin.

Ca vous intéresse ?

Sans plus attendre, je vous explique tout.

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

Tout d’abord, il faut savoir que l’on retrouve le bouton Back to top sous différentes dénominations, comme : Scroll to top, Retour en haut ou 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.

Non mais, franchement, 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 ce 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” sur le Web, mais, pour en avoir testé plusieurs, je préfère celui-ci..

En effet, il est extrêmement simple à mettre en place.

Car il vous 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 :

bouton back to top 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.

A 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 :

bouton back to top après personnalisation

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

Le mot de la fin

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 ?


Partagez !
Hello, moi, c'est Christine 👋. Je suis créatrice et optimisatrice de sites Web et rédactrice Web SEO. J’adore parcourir le web pour dénicher des astuces, fonctionnalités et outils gratuits qui facilitent la création numérique. Sur ce blog, je vous partage mes découvertes et espère qu’elles pourront vous être utiles.
0 0 votes
Évaluation de l'article
S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires
Retour en haut
0
J'aimerai bien avoir votre avis sur cet article 😉x