javascript / Jquery .slideToggle - 页面不随内容滚动

Question

我正在使用 .slideToggle - Jquery 来创建一个手风琴，到目前为止它可以工作。

但是，当div#slickbox 向下或向上时，页面不会随之滚动。页面保持滚动位置。

我在div#slickbox. 内有 2 个巨大的图像（700px x 1300px）

我想滚动页面的内容，向下和向上。

我该怎么做？

谢谢！

jquery

      $('#slickbox').hide();

  $('.more a').click(function() {

    $('#slickbox').slideToggle(3200);

    return false;

  });

HTML

<div id="slickbox">
 <div id="slide_show">
  <div id="slider">
       <ul>
    <li>
     <img alt="figure 1" src="images/fig1.jpg" width="700" height="1300">

  </div><!-- End slide_show -->
</div><!-- End slickbox -->

<div class="donate done">
    <h3 class="more"><a href="#" title="More"> More </a></h3>
</div> <!-- End button-->                                                    

Answer 1

您可以存储#slickbox 元素的.height()，然后将其用作scrollTop 的动画，如下所示：

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200);
    return false;
}, function() {
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200);
    return false;
});​

You can give it a try here，这将导致页面向下滚动相同数量的像素，因为它扩展了图像，并且以相同的速度滚动，因为它具有相同的持续时间。