jQuery显示隐藏内容，然后自动滚动到内容的中间

Question

我设置了一个按钮，单击该按钮会展开页面。这是代码:

/*Source:http://rpardz.com/blog/show-hide-content-jquery-tutorial*/

jQuery('.open-content').hide().before('<div class="container_12"><a href="#" id="toggle-content" class="button"><div id="expand-button" ></div></a></div><div id="toggle-top" style="width:100%"></div>');
jQuery('a#toggle-content').click(function() {
    jQuery('.open-content').slideToggle(1000);
    return false;
});

如您所见，它工作得很好:隐藏:http://cl.ly/101v0N0W1z2D2e0x3a0j展开:http://cl.ly/1Z2Q1d3Y2z2X3G1j1v2G

注意(参见图像侧面的滚动条)页面底部如何展开以显示更多内容；我不明白的是如何使页面在页面完成扩展后自动滚动到现在可见内容的底部..

我使用这个标准脚本来平滑滚动到页面上的位置..

/*Source: http://goo.gl/DaRfF */
jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

});

但我不知道如何集成它，以便它在完成扩展后自动滚动到内容的底部。非常感谢所有帮助，谢谢!

Answer 1

像这样的事情怎么样？

jQuery('.open-content').slideToggle(1000, function(){
   var offset = jQuery('.open-content').offset();
   var y = offset.top + jQuery('.open-content').height();
   var wheight = $(window).height()
   var scroll = y - wheight;
   $(document).animate({scrollTop:scroll}, 500);
});