使用JQuery的slidetoggle()时，屏幕无法向下滚动

Question

我有一个网站，在其中有一个名为.slidingDiv的div，当单击锚.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>

许多感谢

皮特

- Pete Naylor

---

JSHint和jQuery文档通常会提供很大的帮助... - yckart

Answer 1

在slideToggle函数的回调函数中或者在调用slideToggle函数之后设置scrollTop会导致最好情况下出现抖动行为。如果您正在寻找流畅的动画效果，最好是先启动幻灯片，然后使用animate使页面向下滚动。这在此演示中有体现。以下是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);
  });
});​

- Jonathan Dixon

---

按照这个脚本，当div被切换后，屏幕滚动下去，经过几次尝试后我可以向上滚动，但页面会变得很卡顿，好像不让我滚动一样。 - Bogdan Popa

这个示例 http://jsfiddle.net/d5590q4u/ 证实了scrollTop值被设置超过了最大值。如果动画有足够的时间完成，滚动位置会更新，跳跃的行为就会消失。这不是一个好的解决方案，必须有更好的方法来解决这个问题。如果需要更多帮助，建议提出一个新的SO问题。 - Jonathan Dixon

Answer 2

在scrollTop之前进行检查

<script type="text/javascript">

$(document).ready(function(){

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

 $('.show_hide').on('click',function(){
  $(".slidingDiv").slideToggle(function(){
   if($('.slidingDiv').height() > 0) {
    $('html, body').animate({
           scrollTop: $(".slidingDiv").offset().top
       }, 1000);
   }
  });
 });

});

</script>

- user3119274