.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 的高度，因此显示了 scorllbars。我希望垂直滚动条在 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 Plugin，你可以为滑动添加不同的效果，将fx名称添加到代码中（答案中注释掉的行）

改进了代码，因此代码更少但效果相同。