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

时间:2010-09-03 11:08:38

标签: javascript jquery html css

我正在使用 .slideToggle - Jquery 创建一个手风琴,它到目前为止一直有效。

然而,当div#slickbox向下或向上时,页面不会随之滚动。页面保持滚动位置。

我在div#slickbox.

内有2张巨幅图片(700px x 1300px)

我想用内容滚动页面, down&向上的。

我该怎么做?

谢谢!

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-->                                                    

1 个答案:

答案 0 :(得分:3)

您可以存储#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,这会导致页面向下滚动由于图像而展开的相同像素数,并且因为它具有相同的持续时间,因此速率相同。