23 nov

Remplacer des ancres par un défilement de page animé en jQuery

Écrit par freaknboy in Javascript, Web 2.0 | Tags : |

Un défilement animé au TOP !

Fini le positionnement direct du navigateur sur l’ancre de l’url ou d’un lien :

Un lien de ce type là : /#respond nous dirigera donc vers notre destination, d’une manière fine !

Voici, en jQuery donc, ma petite fonction qui utilise le plugin scrollTo

$.fn.replaceAnchors = function() {
  this.each(function(){
    var anchor = $(this);
    if (anchor.attr('href').indexOf('#') != -1) {
       anchor.click(function() {				
         var div = anchor.attr('href').replace(document.location.href, '');
         $.scrollTo(div, 1000, {onAfter: function() { document.location.href = div; }});
       });
      }
    }
  });
}

Exemple d’appels :

// Je veux remplacer tous les liens ayant une ancre, sans exceptions :
$('a').replaceAnchors();
 
// Je veux remplacer tous les liens de classe 'scroll_to' :
$('a.scroll_to').replaceAnchors();

Vous remarquez qu’il est simple d’adapter une fonction jQuery en une méthode d’objet de celui-ci !


Réagissez sur cet article