jQuery animate scrollTop

J'ai assez peu de section balises dans un div avec un dépassement de capacité définie à hidden. Le code est dans la ligne de ce:


<div id="viewport">
   <section>
      content
   </section>
   <section>
      content
   </section>
</div>

Je l'ai réglé comme ça parce que je veux être en mesure de faire défiler les sections contenues dans le div lorsque le lien correspondant est activé dans le menu. J'ai cette fonction:


$('#mn a').click(function(){
   var aHref = $(this).attr("href");
   var sectionHeight = $('section'+aHref+'').height();
   $('#viewport').height(sectionHeight);
});

Que j'utilise pour redimensionner la #viewport div parce que le sections sont de tailles différentes. Lorsque j'essaie de mettre ce livre dans le cadre de cette fonction:


$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);

il rend l'ensemble de défilement des pages. Quand j'ai essayer de remplacer $('body,html') avec $('section, #viewport') il défile à l'intérieur de la div, mais il ne le fait pas correctement.

J'ai un exemple vivant de ce ici. Je suppose qu'il a quelque chose à voir avec la .offset() ou ce que je suis de passage dans la .animate(), mais j'ai essayé pas mal de choses différentes, mais en vain. Quelqu'un peut-il svp me pointer dans la bonne direction ou de me dire ce que j'ai fait de mal?

OriginalL'auteur jezza-tan | 2011-12-13

  1. 11

    Le problème est de savoir comment position() œuvres, il retourne en haut/de hauteur liées à scrollTop.

    Donc, si vous demandez à cliquez sur $('section'+aHref+'').position().top la position retournée est modifié à partir de scrollTop valeur.

    Vous pouvez obtenir toute la hauteur de la position au prêt de l'événement. (donc scrollTop est 0)

    Ou vous pouvez désinfecter les valeurs de position:

    $("section#skills").position().top + $("#viewport").scrollTop()
    Je vous remercie beaucoup. Désinfection de la valeurs a parfaitement fonctionné!
    Il a travaillé pour moi aussi. J'ai essayé sous firefox.

    OriginalL'auteur InuYaksa

  2. 8

    Tout d'abord, vous devez empêcher le comportement par défaut de l'ancre afin de faire défiler la page vers le haut de la page. Vous pouvez le faire en appelant preventDefault() méthode sur l'objet de l'événement à l'intérieur de click gestionnaire d'événement. Essayez cette

    $('#mn a').click(function(e){
   e.preventDefault();

   var aHref = $(this).attr("href");
   var top = $('section'+aHref+'').position().top;
   $('#viewport').animate({scrollTop: top}, 800);
});
    J'ai eu le e.preventDefault() là, mais je pensais que c'était gâcher quelque chose, pour quelque raison si je l'ai pris. Malheureusement, la solution que vous avez proposée ne fonctionne pas non plus.
    Pouvez-vous alerte sectionHeight et voir ce que vous obtenez?
    255 pour la première. Il fait défiler en arrière et en avant, mais jamais complètement vers le bas.
    Essayez mon édité réponse maintenant.
    J'ai accueilli ici: andrewpeacock.tumblr.com/testingscroll2 juste après le chargement, si je clique sur un lien, il fonctionne parfaitement. Après cela, il ne fonctionne plus bien.

    OriginalL'auteur ShankarSangoli

  3. -1

    Si vous voulez un simple plugin jquery pour faire cela, alors vous pouvez essayer (AnimateScroll) qui prend actuellement en charge plus de 30 assouplissement des styles trop

    OriginalL'auteur Ram Patra