Javascript - Scrolling animé avec jQuery

Scrolling animé avec jQuery

Scrolling animé avec jQuery

Par padigo, publié le 20/02/2010 à 10:23:29

Dans ce tutoriel nous verront comment mettre en place un scrolling animé sur tous les liens menant vers des ancres. Pour cela nous utiliserons la librairie jQuery qui nous permettra de gérer les évènements à associer aux liens.

Etape 1 : Le script nécessite l'utilisation de jQuery 1.2.1, au minimum, qu'il convient de déclarer entre les balises <head></head> de votre page, ainsi qu'un fichier bookmarkscroll.js.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

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

Cette étape fait référence à un fichier de bookmarkscroll.js, que vous devez télécharger ici (clic droit, save) :

http://webdezign.tutoriaux.free.fr/sources/bookmarkscroll.js

Etape 2 : Les différents types de liens possibles :

• Ancre régulière : #sectiona
Exemple : <a href="#sectiona">Section A</a>

• Via JavaScript et les éléments ID : javascript:bookmarkscroll('sectiona'))
Exemple : <a href="javascript:bookmarkscroll('sectiona')">Section A</a>

• Paramètre URL et ID d'élément : targetpage.htm?scrollto=sectiona
Exemple : <a href="targetpage.htm?scrollto=sectiona">Section A</a>

Etape 3 : Il nous reste plus qu'à placer vos lieux référents (le lieux ou le scrolling va s'arrêter).
Dans notre exemple ce sera ceci :

<a name="sectiona"></a>

Et voilà ce tutoriel est terminé !
Si vous avez du mal à comprendre, voici un pack avec des exemples :

http://webdezign.tutoriaux.free.fr/sources/Scrolling-anime-avec-jQuery-exemple.zip

1 commentaire