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

Question

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

非常感谢

皮特

Answer 1

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

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>