Smooth Scroll ou comment remonter en douceur

Publié par Kilaam le 14/9/2007 (2672 lus)

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

É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.

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.

Naviguer à travers les articles
Des infobulles avec Javascript, c'est accessible !	Afficher un dock Mac OS X sur votre site

Abonnez-vous !

Connexion

Inscrivez-vous maintenant !
Perdu le mot de passe ?

AccessiGo

Un peu de libre...