.slideToggle自動向下滾動以顯示內容

Question

當用戶單擊鏈接時，我正在使用.slideToggle打開面板：

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

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

切換的div（#panel）的內容比包含的div的高度高，因此出現了滾動條。 我希望垂直滾動條在div切換時自動向下滾動以顯示新內容。 我想我可以使用.scrollTop做到這一點，但是我不確定如何同時實現它...有什么想法嗎？

編輯：似乎已經達成共識，這是實現我所描述的最佳方法：

<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>

這會使面板滑動，但向下滾動效果不起作用。

Answer 1

我以前做過這樣的事情：

   $(".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>

這樣對您有幫助嗎？

編輯：

如果您下載了jQuery Easing插件 ，則可以向滑動條添加不同的效果，將FX名稱添加到代碼中（在注釋行中注釋）

改進了代碼，因此代碼更少，但效果相同。