Vous souhaitez rendre votre site internet professionnel plus fluide et agréable à parcourir ?
Ajouter un bouton de retour vers le haut est une petite amélioration simple à mettre en place, mais qui fait toute la différence. En facilitant la navigation de vos visiteurs, vous offrez une meilleure expérience utilisateur, ce qui contribue aussi à améliorer votre référencement SEO.
Certains thèmes WordPress intègrent déjà cette option, mais si ce n’est pas votre cas, suivez ce tutoriel pas à pas. En quelques minutes, vous aurez un bouton “remonter en haut” fonctionnel et au design cohérent avec votre site.
<button id="toTop" class="to-top" aria-label="Retour en haut" title="Retour en haut">
↑
</button>
<script>
(function(){
const btn = document.getElementById('toTop');
const showAt = 500; // px de scroll avant d’afficher
function toggle(){
if (window.scrollY > showAt) btn.classList.add('show');
else btn.classList.remove('show');
}
window.addEventListener('scroll', toggle, {passive:true});
window.addEventListener('load', toggle);
btn.addEventListener('click', function(){
window.scrollTo({ top: 0, behavior: 'smooth' });
});
})();
</script>
:root{
--to-top-size: 48px;
--to-top-radius: 999px;
--to-top-shadow: 0 6px 20px rgba(0,0,0,.15);
--to-top-bg: #111; /* adaptez à votre charte */
--to-top-bg-hover: #000;
--to-top-color: #fff;
}
.to-top{
position: fixed;
right: 20px;
bottom: 20px;
width: var(--to-top-size);
height: var(--to-top-size);
line-height: var(--to-top-size);
text-align: center;
border: 0;
border-radius: var(--to-top-radius);
background: var(--to-top-bg);
color: var(--to-top-color);
box-shadow: var(--to-top-shadow);
cursor: pointer;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity .25s, transform .25s, background .2s;
z-index: 9999;
}
.to-top:hover{ background: var(--to-top-bg-hover); }
.to-top.show{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* (Optionnel) Masquer sur mobile très petit */
@media (max-width: 480px){
.to-top{ right: 14px; bottom: 14px; }
}
Commencez par copier le code HTML que j’ai mis plus haut dans l’article.
Ensuite, connectez-vous à votre tableau de bord WordPress et suivez ces étapes :
Rendez-vous dans Modèles > Theme Builder (ou Constructeur de thème) si vous utilisez Elementor.
Ouvrez la section correspondant à votre footer (pied de page).
Cliquez sur Modifier avec Elementor.
Ajoutez un widget HTML à l’endroit où vous souhaitez que le bouton soit présent.
Collez le code que vous avez copié plus haut.
Cliquez sur Publier pour enregistrer les modifications.
Vous pouvez maintenant actualiser votre page pour vérifier que le code est bien pris en compte. Le bouton ne s’affichera pas encore c’est normal, on va s’occuper du style juste après.
Maintenant que votre structure HTML est en place, il faut styliser le bouton pour qu’il apparaisse proprement et se fonde dans votre design.
Retournez sur votre tableau de bord WordPress.
Allez dans Apparence > Personnaliser > CSS additionnel.
Remontez en haut de l’article pour copier le code CSS que j’ai mis à disposition.
Collez-le dans la zone prévue.
Cliquez sur Publier pour enregistrer vos modifications.
Si vous n’avez pas Elementor Pro, pas de panique : vous pouvez installer l’extension gratuite Royal Addons, qui permet d’ajouter facilement du CSS additionnel à votre site.
Votre bouton est désormais en place. Pour vérifier que tout fonctionne correctement :
Rechargez votre site internet.
Faites défiler la page vers le bas : le bouton “retour en haut” devrait apparaître automatiquement.
Cliquez dessus : vous devriez être ramené instantanément en haut de la page.
Si le bouton n’apparaît pas ou ne fonctionne pas :
Vérifiez que vous avez bien collé le code HTML dans votre footer ;
Vérifiez que le CSS additionnel est bien enregistré ;
Actualisez ou videz le cache de votre site si nécessaire.
Le bouton reprend généralement le style global de vos boutons WordPress (formes, couleurs, typographie…).
Mais vous pouvez facilement le personnaliser pour l’adapter à votre charte graphique :
Modifier la couleur de fond pour qu’elle corresponde à vos couleurs de marque ;
Ajuster la taille du bouton pour le rendre plus discret ou plus visible ;
Changer la position (par exemple, plus proche du bord ou plus centrée) ;
Ajouter une animation au survol pour plus de dynamisme.
Tout cela se fait directement dans le code CSS additionnel.
Au-delà de l’aspect esthétique, ce bouton améliore réellement l’expérience utilisateur.
Il permet à vos visiteurs de revenir en haut d’une page longue en un seul clic, sans avoir à faire défiler manuellement.
Les avantages sont nombreux :
Une navigation plus fluide, notamment sur mobile ;
Un meilleur confort de lecture sur les pages de blog ou les catalogues produits ;
Une meilleure accessibilité pour vos utilisateurs ;
Et tout cela sans plugin supplémentaire, donc sans alourdir votre site.
Ajouter un bouton de retour vers le haut sur WordPress est une amélioration simple mais très efficace.
Avec seulement deux petits extraits de code un pour le HTML, un pour le CSS vous pouvez :
Faciliter la navigation de vos visiteurs,
Rendre votre site plus professionnel,
Et garder un site rapide, léger et bien optimisé pour le SEO.
C’est typiquement le genre de petit détail qui fait la différence sur un site bien construit.
Je me suis d’abord lancé comme freelance, créant mes premiers sites WordPress en 2022 et me formant progressivement au SEO et au design web. Fin 2023, j’ai fondé Agence web armor, pour accompagner les entreprises dans leur présence en ligne. Aujourd’hui, je conçois des sites simples, rapides et bien référencés, pensés pour attirer des visiteurs qualifiés et générer des résultats concrets.
