Rechercher
Fermer ce champ de recherche.
Fil d'ariane :
»

Comment ajouter un bouton retour en haut sur vos pages

Lorsqu’on à la plume lourde et que l’on aime rédiger de longs articles et que vos lecteurs se retrouvent donc perdus tout en bas de vos pages il peut être utile d’ajouter un “bouton retour en haut” (back to top) afin de leur permettre de retourner en haut de vos pages en un seul clic sans que l’internaute doive scroller jusque la.

Ajouter un bouton back to top avec effet scrolling en jQuerry

Pour commencer, il faut créer le lien en question. Le plus simple étant d’ajouter votre bouton retour en haut au header ou au footer. Personnellement nous préférons l’ajouter dans le footer afin de ne pas ralentir le chargement de l’en-tête de votre site, même si cela devait être de façon minimale. Pour cela nous pouvons l’insérer dans wp_head ou dans wp_footer.

Ajoutez simplement le code suivant à votre fichier functions.php :

//WordPress Pour les Nuls
//Création du lien pour le bouton retour en haut
add_action( 'wp_footer', 'wppln_back_to_top' );
function wppln_back_to_top() {
echo '<a id="totop" href="#">Retour en haut</a>';
}

Maintenant que nous avons créer le lien pour notre bouton retour en haut il faut le mettre en page, pour cela nous allons définir son CSS en ajoutant le code suivant (que vous pouvez personnaliser à votre guise) via toujours le fichier functions.php :

//WordPress Pour Les Nuls
// CSS de notre bouton "retour en haut"
add_action( 'wp_head', 'wppln_back_to_top_style' );
function wppln_back_to_top_style() {
    echo '<style type="text/css">
        #totop {
            position: fixed;
            right: 30px;
            bottom: 30px;
            display: none;
            outline: none;
        }
    </style>';
}

Notre lien est maintenant prêt, reste plus qu’à le faire fonctionner en ajoutant l’effet scroll. Si votre site WordPress utilise déjà la librairie jQuerry vous pouvez ignorer cette étape, si ce n’est pas le cas ajoutez le code suivant à votre fichier functions.php : (vous pouvez déplacer la position du lien en modifiant “400” qui correspond à 400 pixels en partant du haut de votre page.)

add_action( 'wp_footer', 'wppln_back_to_top_script' );
function wppln_back_to_top_script() {
    echo '<script type="text/javascript">
        jQuery(document).ready(function($){
            $(window).scroll(function () {
                if ( $(this).scrollTop() > 400 )
                    $("#totop").fadeIn();
                else
                    $("#totop").fadeOut();
            });
 
            $("#totop").click(function () {
                $("body,html").animate({ scrollTop: 0 }, 800 );
                return false;
            });
        });
    </script>';
}

Et voilà ! En seulement 3 petites étapes vous avez maintenant votre bouton “retourner en haut du site” (back to top) en bas de vos pages et articles. Vous pouvez également modifier le lien comme bon vous semble en ajoutant soit une image soit une font google ou ce que bon vous semble.

Facebook
Twitter (X)
LinkedIn
WhatsApp
Reddit

Gregory

Agitateur de Stratégiesaddict à WordPress depuis 2003, fada de Google depuis 1998. J’accompagne au quotidien plusieurs entreprises et indépendants dans la gestion de leur stratégie digitale et l’optimisation de leurs sites WordPress.

2 Comments

  1. Hello

    Super le tuto! En effet ça fonctionne bien 🙂
    Par contre je n’arrive pas du tout à mettre à la place du “Retour en haut” un lien vers un bouton.
    Que ce soit un lien pointant sur un dossier de l’hébergement ou un google font.
    Saurait tu comment y arriver?
    Merci

Laisser un commentaire

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

Sur le même sujet