javascript / Jquery .slideToggle-頁面無法滾動顯示內容

Question

我正在使用.slideToggle - Jquery創建一個手風琴，它到目前為止可以工作。

但是，當div#slickbox下降或上升時，頁面將不會隨之滾動。 頁面保持滾動位置。

我在div#slickbox.有2個巨大的圖像（700像素x 1300像素） div#slickbox.

我要上下滾動內容。

我怎樣才能做到這一點？

謝謝！

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;
});​

您可以在此處進行嘗試 ，這將導致頁面向下滾動與由於圖像而擴展的像素數量相同的像素，並以相同的速率向下滾動，因為頁面的持續時間相同。