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

Question

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

但是，当 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

您可以存储 .height() #slickbox 元素然后将其用作 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 ，这将导致页面向下滚动相同数量的像素(因为图像而扩展)，并且由于具有相同的持续时间而以相同的速率向下滚动。