flosy.info | Développement Web, Open source …

Sep/10

14

Effectuer un scroll grâce à jQuery

Lors d’une migration de Prototype vers jQuery il fallait garder la fonctionnalité de scroll dans la page.
La fonctionnalité existante est relativement simple, au clic sur un lien le navigateur se positionne sur un élément.
Passons le fait qu’il soit possible d’arriver à ce résultat en utilisant les ancres et concentrons-nous sur la migration.

Voici le code avec Prototype:

  <a onclick="new Effect.ScrollTo('add-content'); return false;" 
     href="#" class="polarize">
         Ajoutez votre contenu
  </a>

Nous le remplaçons par le code jQuery suivant :

  <a href="#" onclick="$('html, body').animate({scrollTop: $('#add-content').offset().top}, 800); 
     return false;">
       Ajoutez votre contenu
  </a>

Nous utilisons tout d’abord la méthode scrollTop() qui permet soit d’obtenir soit de fixer la position de la barre de défilement vertical fonction d’un élément.

Pour déterminer la position de l’élément nous utilisons la méthode offset() qui permet d’obtenir les coordonnées d’un élément.

Enfin grâce à la méthode animate nous pouvons définir la vitesse de défilement (dans notre exemple il est réglé à 800 ms).

Related Posts:

  • No Related Posts

·

No comments yet.

Leave a Reply

 

<<

>>

Theme Design by devolux.nh2.me