Question

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

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

我在div#slickbox.

内有2张巨幅图片（700px x 1300px）

我想用内容滚动页面， down＆amp;向上的。

我该怎么做？

谢谢！

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

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

1 个答案: