jQuery Faites défiler jusqu'à Div

Question

Je fais une page de FAQ et d'avoir les boutons sur le dessus pour accéder à une catégorie (elle saute à l' p tag que j'utilise comme l'étiquette de la catégorie, ex. <p id="general"> de ma catégorie générale). Au lieu de simplement sauter à droite à la catégorie, je veux ajouter un effet de défilement. Je veux quelque chose comme http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm qui défile à la partie souhaitée de ma page. Ce lien est un script qui va vers le haut de la page avec un joli effet de défilement. J'ai besoin de quelque chose de semblable qui seront faites défiler jusqu'à l'endroit où je lien. Par exemple, si je veux aller à misc. catégorie, je veux juste être en mesure d'avoir <a href="#misc">Miscellaneous</a> et l'ont faites défiler jusqu'à la section de la page.

Answer 1

Il est souvent nécessaire de déplacer les objets body et html ensemble.

 $('html,body').animate({
   scrollTop: $("#divToBeScrolledTo").offset().top
});
 

ShiftyThomas a raison:

 $("#divToBeScrolledTo").offset().top + 10 // +10 (pixel) reduces the margin
 

Donc, pour augmenter la marge d'utilisation:

 $("#divToBeScrolledTo").offset().top - 10 // -10 (pixel) would increase the margin between the top of your window and your element
 

Answer 2

 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
 

Vérifiez ce lien: http://css-tricks.com/snippets/jquery/smooth-scrolling/ pour une démonstration, je l'ai déjà utilisé et cela fonctionne assez bien.

Answer 3

Quelque chose comme cela vous permettrait de prendre en charge le clic de chaque lien interne et de faire défiler jusqu'à la position du signet correspondant:

 $(function(){
  $('a[href^=#]').click(function(e){
    var name = $(this).attr('href').substr(1);
    var pos = $('a[name='+name+']').offset();
    $('body').animate({ scrollTop: pos.top });
    e.preventDefault();
  });
});
 

Answer 4

Pourrait simplement utiliser la fonction de position JQuery pour obtenir les coordonnées de votre div, puis utiliser le défilement javascript:

 var position = $("div").position();
scroll(0,position.top);
 

Answer 5

si l'élément de lien est:

 <a id="misc" href="#misc">Miscellaneous</a>
 

et la catégorie Divers est délimitée par quelque chose comme:

 <p id="miscCategory" name="misc">....</p>
 

vous pouvez utiliser jQuery pour obtenir l'effet souhaité:

 <script type="text/javascript">
  $("#misc").click(function() {
    $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});
  });
</script>
 

pour autant que je m'en souvienne correctement .. (cependant, je ne l'ai pas testé et écrit de mémoire)