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

时间:2011-08-06 22:44:41

标签: jquery scroll show-hide

我有一个按钮设置,点击后,展开页面。这是代码:

/*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);
});

});

但我无法看到如何整合它,以便在完成扩展后自动滚动到内容的底部。非常感谢所有帮助,谢谢!

1 个答案:

答案 0 :(得分: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);
});