Comment faire un lien de retour en haut de page sur un site web ?

Ce tutoriel vous présente comment faire un lien de retour en haut d'une page web sur votre site internet.

Après avoir lu une longue page web, il peut être intéressant de proposer aux internautes de pouvoir retourner rapidement tout en haut de la page de votre site internet, et ainsi lui permettre de continuer sa navigation.
Vous améliorer ainsi l'expérience des internautes qui visite le site web que vous avez créé.

Voici une astuce pratique en HTML pour ajouter un lien permettant un retour vers le haut de votre site internet.

Un lien de retour vers le haut, késako ?

Un lien de retour vers le haut en HTML est ce que l'on appelle une ancre. Si vous souhaitez en savoir plus sur les ancres en général et comment les utiliser, nous vous recommandons la lecture du tutoriel Placer une ancre dans une page web.

Pour permettre un retour vers le haut, nous avons donc besoin d'ajouter une ancre qui pointera vers le haut du site.

Insérer le lien "Retour en haut"

Dans un premier temps, rendez-vous dans Configuration > Réglages > Zones éditables pour éditer votre pied de page et y insérer le lien (cette partie est modifiable à partir d'une offre Pro).

Dans la section Zone en bas de votre site, ajoutez une ligne, ou une nouvelle colonne, et choisissez l'Éditeur HTML.

Copiez et collez ensuite le lien HTML suivant :

<a href="#" class="btn btn-default">Retour en haut ↑</a>

Vous pouvez changer le texte Retour en haut ↑ par un autre et remplacer les class btn btn-default par btn btn-primary pour donner un style différent à votre bouton.

Exemple :

<a href="#" class="btn btn-primary">Haut de Page</a>

Une fois satisfait, enregistrez.

En testant votre lien, vous remarquerez que vous êtes brutalement redirigé vers le haut du site.

Pour contrer ce comportement et permettre à la page de défiler doucement vers le haut, il faudra ajouter une règle CSS (supportée par la plupart des navigateurs récents).

Toujours dans Configuration > Réglages > Zones éditables, copiez et collez le code CSS suivant dans le champ Styles CSS supplémentaires et enregistrez :

html {
  scroll-behavior: smooth;
}

Vous pouvez maintenant passer en éditeur visuel en cliquant sur le bouton idoine en haut à droite de la zone de saisie et appliquer d'autres styles à votre bouton.

Voici par exemple un bouton centré et en italique.

A savoir

Certains thèmes, comme le thème Blogger, intègrent nativement un bouton permettant un retour vers le haut.

Le bouton apparaît alors automatiquement en bas à droite de la page après avoir fait défiler suffisamment la fenêtre vers le bas.

N'hésitez pas à sauvegarder la configuration de votre thème actuel et à tester d'autres thèmes pour découvrir les fonctionnalités qu'ils ont à vous offrir.