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.