Comment faire un défilement progressif en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-10-20 12:08:01

Question

Bonjour, lorsque je fais un lien vers une ancre HTML, la page défile d'un cou vers le bloc HTML où se situe l'ancre.

<a name="top"></a>
<div style="height:10000px">contenu de ma page</div>
<a href="#top">Retour en haut de la page</a>

Existe-t-il un moyen d'effectuer un défilement progressif ?

Réponse

La méthode la plus récente pour effectuer un scroll ou un défilement progressif consiste à appliquer la propriété CSS scroll-behavior, avec la valeur smooth, à la balise HTML.

De cette manière tous les liens vers des ances auront un effet de défilement progressif.

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment faire un défilement progressif en HTML et CSS ?</title>
</head>
<body>
<style>
html {
  scroll-behavior: smooth;
}
</style>
<a name="top"></a>
<div style="height:10000px"></div>
<a href="#top">Retour en haut de la page</a>
</body>
</html>

Remarque : Il n'est par contre pas possible de contrôler la rapidité du défilement avec la propriété CSS scroll-behavior. Pour cela vous devez utiliser JavaScript.