défilement automatique .slideToggle vers le bas pour révéler le contenu

Question

J'utilise .slideToggle pour ouvrir un panneau lorsque l'utilisateur clique sur un lien:

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".btn-slide").click(function(){ 
$("#panel").slideToggle("slow"); 
$(this).toggleClass("active"); 

return false; 
}); 
}); 
</script> 

Le contenu de la div basculée (de #panel) est plus grand que la hauteur le div contenant si scorllbars apparaissent. Je voudrais que la barre de défilement verticale défile automatiquement vers le bas pour révéler le nouveau contenu lorsque le div est basculé. Je pense que je pourrais probablement le faire avec .scrollTop pour que cela se produise mais je ne suis pas sûr de savoir comment y arriver en même temps ... Des idées?

EDIT: Il semble y avoir un consensus que ce soit la meilleure façon de s'y prendre pour atteindre ce que je décrit:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".btn-slide").click(function(){ 
     var $panel = $("#panel"); 
     $panel.slideToggle("slow"); 
     if ($panel.is(':visible')){ 
      $panel.parent().scrollTop($panel.height()-$panel.parent().height()); 
     } 
     $(this).toggleClass("active"); 

     return false; 
    }); 
}); 
</script> 

Cela rend la lame du panneau, mais le défilement vers le bas effet ne fonctionne pas ..

Answer 1

Je l'ai fait quelque chose comme ça avant:

$(".btn-slide").click(function(event){ 

    if ($(this).hasClass("active")) 
    { 
     $(this).removeClass("active"); 
     $("#panel").slideUp("slow"); 
    } 
    else 
    { 
     $(this).addClass("active"); 
     $("#panel").slideDown("slow"); 

     var destination = $("#container ").offset().top + $("#container").height(); 


     $("#container").animate({ scrollTop: destination},"slow"); 
     //or 
     //$("#container").animate({ scrollTop: destination},"slow", "fx_name_here"); 

    } 


    event.preventDefault(); 
}); 

Html:

<a href="#" class="btn-slide">Fire Panel</a> 
<div id="container"> 
    <div id="panel">sdfsdfsdfs</div> 
</div> 

Cela vous aiderait-il?

EDIT:

Si vous téléchargez le jQuery Easing Plugin vous pouvez ajouter des effets différents au glissement, en ajoutant le nom de FX dans le code (a commenté la ligne en réponse)

Code amélioré donc il y a moins de code, mais même effet.