Smooth Scroll ou comment remonter en douceur
Catégorie : Scripts
Publié par Kilaam le 14/9/2007

Histoire de permttre une meilleure navigation, on place fréquemment un lien "Haut de page" ou "Bas de page". Ces liens permettent à l'internaute de remonter en un simple clic. Toutefois, l'effet est plutôt radicale. Dans ce tutoriel, nous allons voir comment mettre en place un petit JavaScript qui fera un défilement doux et ce automatiquement.


Étape 1 : Télécharger le script

Vous pouvez télécharger le script smothscroll.js directement via cette page


Étape 2 : Implémenter le script

Insérer la ligne de code ci-dessous entre les balises <head> et </head> de votre site

<script src="smoothscroll.js" type="text/javascript"></script>


Étape 3 : Création du marqueur

Pour que le lien servant à remonter en haut de page fonctionne, il faut créer un marqueur qui indiquera où remonter. Pour ce faire, créer un lien comme ci-dessous le plus haut possible dans votre page.

<a name="top">Nous sommes en haut !</a>

 

Étape 4 : Créer le lien pour remonter

L'étape la plus simple. Il suffit de créer un lien qui remontera directement en haut de page. Insérez-le en bas de page.

<a href="#top">Haut de page</a>


Bon à savoir...


Pour aller plus loin, vous pouvez refaire les étapes 3 et 4 pour pouvoir se rendre directement en bas de page. Ainsi, il suffira de placer le marqueur en bas de page et de mettre le lien en haut de page.