scrollTo() jQuery sans plugin ?

2378867408_4cc90791d6_z

Aujourd’hui j’ai eu besoin de me passer du (apparemment seul) plugin qui permet de faire un .scrollTo(position) en jQuery pour la simple et bonne raison qu’il plante avec ma méthode de détection de Chrome et du numéro de version.

(oui j’arrive à détecter chrome / safari indépendamment et leur version, et non « webkit »)

Ni une ni deux quelques recherches sur internet et me voilà qui bricole un script jQuery natif, qui n’utilise pas de plugin et qui permet de lancer un scroll de l’utilisateur pour l’amener à une position précise de la page, le tout avec une animation.

Voici donc ce que cela donne, j’ai volontairement zappé la structure de la page dans ce code, puisque c’est simplement pour vous montrer comment j’ai procédé, de même qu’il ne faudra pas oublier d’initialiser jQuery & jQuery UI et de faire tourner le bout de code après un $(document).ready() hein ;)

Voir la démo sur JSFIDDLE

 

 

Crédit Photo


About the author
Geek dans l'ame , je bosse maintenant pour @Absolu_Payment ou je suis PHP dev. Retrouvez ici mes reflexions concernant tout ce qui est relatif au dev, au web ...

4 Comments on "scrollTo() jQuery sans plugin ?"

  1. Simon dit :

    Bonjour Thibault,

    J’aurais aimé savoir quelle été le type d’erreur que tu rencontrais sous Chrome parce que j’utilise ScrollTo aussi et j’ai un problème d’affichage de mon contenu sous Chrome du coup je cherche des pistes… Par contre je n’ai aucun test de détection de Browser contrairement à toi…

    Si tu veux constater le problème c’est >> http://www.beji.fr

    Merci d’avance ;)

  2. thibault dit :(Author)

    @Simon : Comme tu peux le voir avec le code, il se trouve que pour Chrome et Safari il faut lancer .scrollTo sur document.body alors que les autres navigateurs ont besoin qu’on le lance sur document.documentElement . Tout simplement :)

  3. Thec dit :

    Super tout simplement ! Je n’étais pas satisfait des plugins que j’ai testé, et là c’est nickel !
    Donc merci beaucoup et bonne continuation !
    ;)

  4. Laymain dit :

    Pour en faire une extension jQuery

    $.fn.scrollTo = function(){
    if (this.length > 0)
    $(($.browser.chrome || $.browser.safari) ? 'body' : 'html').animate({scrollTop: $(this).offset().top}, 1000);
    };

Leave a Comment