Exemple :
Ce que l’on va construire
Un bouton back to top est un petit bouton flottant, visible en permanence dans un coin de l’écran, qui permet de remonter instantanément en haut d’une page — très utile sur les pages longues.
Le résultat final, en langage naturel : une page avec du texte suffisamment long pour déborder de l’écran, et un bouton fixe en bas à droite. Un clic sur ce bouton ramène tout en haut de la page.
Étape 1 : La structure HTML
Deux ingrédients seulement : un id sur le <body>, qui servira de cible, et un lien qui pointe vers cette cible.
<!-- id="top" sur le body : c'est la cible vers laquelle le bouton va ramener -->
<body id="top">
<!-- ... tout le contenu de la page ... -->
<!-- href="#top" : ce lien pointe vers l'id="top" du body -->
<a href="#top" id="retour-haut" aria-label="Retour en haut">↑</a>
</body>
Rappel du principe des ancres (déjà vu au chapitre 190) : un lien href="#top" ne pointe pas vers une autre page, mais vers l’élément qui possède id="top", sur la même page. Ici, c’est le <body> lui-même qui joue ce rôle de cible.
Le symbole ↑ est une entité HTML qui affiche une flèche vers le haut (↑) — même logique que © vue au chapitre 700.
Étape 2 : Le CSS du bouton flottant
#retour-haut {
/* sort le bouton du flux normal et le fixe par rapport à la fenêtre du navigateur, pas par rapport à la page */
position: fixed;
bottom: 20px;
right: 20px;
background-color: #fb6400;
color: #ffffff;
border: none;
border-radius: 10px;
padding: 10px 16px;
font-size: 1.5rem;
cursor: pointer;
text-decoration: none;
/* place le bouton au-dessus de tout le reste du contenu */
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
Pourquoi position: fixed; ? Vu au chapitre 135 : un élément en fixed reste collé au même endroit de l’écran, même quand on fait défiler la page — exactement le comportement recherché ici. bottom et right fonctionnent comme top/left, mais en partant du bord opposé.
Étape 3 : Une page de démonstration
Pour voir le bouton en action, il faut une page assez longue pour déborder de l’écran — sinon, il n’y a rien à faire défiler. On utilise du texte latin, avec un rappel régulier pour savoir où en est la démonstration.
<section class="demo">
<h1>Bouton back to top</h1>
<p><strong>Allez en bas de la page avant d'utiliser le bouton retour en haut.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<!-- ... répétez plusieurs paragraphes de texte latin, avec le rappel ci-dessus toutes les 3-4 lignes ... -->
<p><strong>Vous êtes en bas de la page : cliquez sur le bouton en bas à droite pour remonter tout en haut.</strong></p>
</section>
Étape 4 : Le squelette à assembler
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bouton back to top</title>
<style>
/* collez ici le CSS de l'étape 2 */
</style>
</head>
<body id="top">
<!-- collez ici la section de démonstration de l'étape 3 -->
<!-- collez ici le lien-bouton de l'étape 1 -->
</body>
</html>
Étape 5 : Tester
Ouvrez votre page assemblée, faites défiler jusqu’en bas, puis cliquez sur le bouton en bas à droite. Vous devez remonter instantanément tout en haut de la page.
Bloqué, ou envie de comparer votre résultat ? Cliquez sur le bouton ci-dessous.
Pour aller plus loin : un défilement animé
Dans la version actuelle, le clic sur le bouton provoque un saut instantané en haut de la page. On peut facilement transformer ça en un défilement animé, sans une seule ligne de JavaScript, avec une seule propriété CSS.
/* anime tout défilement déclenché par un lien ancre (comme notre bouton) */
html {
scroll-behavior: smooth;
}
Cette propriété se place sur la balise <html>, une seule fois. Dès qu’elle est présente, tous les liens ancres de la page (pas seulement notre bouton) héritent automatiquement d’un défilement animé, sans rien changer au HTML ni au JavaScript.
Une limite à connaître : scroll-behavior: smooth; utilise l’animation par défaut du navigateur — on ne peut ni régler précisément sa durée, ni personnaliser sa courbe d’accélération, ni ajouter un effet d’amortissement (un léger rebond en fin de course, par exemple). Pour ce niveau de contrôle, il faudrait recoder l’animation soi-même en JavaScript, ou passer par une bibliothèque externe spécialisée — un peu comme Splide pour les sliders (chapitre 810). Une bibliothèque reconnue pour ce type d’effet est Lenis, qui propose un défilement fluide avec inertie et amortissement, bien au-delà de ce que le CSS seul permet. Ce cours ne va pas plus loin sur ce sujet : l’objectif ici est simplement de savoir que cette possibilité existe.
Voici la correction, avec cette seule ligne ajoutée :