javascript - 使用JQuery slidetoggle()时屏幕未向下滚动

我在一个网站上有一个名为.slidingDiv的网站，单击 anchor .show_hide时，它会出现并向下滑动，这是页面上唯一的内容时，这很棒。

如果此div上方还有其他内容，则不会向下滚动并显示。相反，它显示了div，但它不在站点中，因此它确实可以工作，但不会将其余内容推高。

这是JQuery:

<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle(), 1000;
    scrollTop: $(this).offset().top
    });

});

</script>

非常感谢

皮特

最佳答案

在scrollTop函数的回调中或在调用slideToggle函数之后(如您所进行的那样)设置slideToggle最多只会导致跳动行为。如果您正在寻找平滑的动画，则最好先启动幻灯片，然后使用animate将页面向下滚动。此fiddle证明了这一点。这是js:

$(document).ready(function() {
  $(".slidingDiv").hide();
  $(".show_hide").show();

  $('.show_hide').click(function() {
    $(".slidingDiv").slideToggle(1000);
    $('html, body').animate({
      scrollTop: $(".slidingDiv").offset().top + $('window').height()
    }, 2000);
  });
});​