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

Posted 2023-02-25

【中文标题】使用 JQuery slidetoggle() 时屏幕不向下滚动

【英文标题】：Screen not scrolling down when using JQuery slidetoggle()

【发布时间】：2012-12-14 11:30:51

【问题描述】：

我有一个站点，其中有一个名为 .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>

非常感谢

皮特

【问题讨论】：

JSHint 和 jQuery 文档通常很有帮助...

【参考方案1】：

在slideToggle 函数的回调中或在调用slideToggle 函数之后（如您所做的那样）设置scrollTop 最多会导致跳跃行为。如果您正在寻找流畅的动画，最好启动幻灯片然后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);
  );
);​

【讨论】：

按照这个脚本，在div切换后，屏幕向下滚动，我可以尝试几次后向上滚动，页面变得跳跃，就像它不允许我滚动一样。

这个小提琴，jsfiddle.net/d5590q4u，确认 scrollTop 值设置超过最大值。如果动画有时间完成，则滚动位置会更新并且跳跃行为消失。这不是一个好的解决方案，必须有更好的方法来解决这个问题。如果您需要更多帮助，我建议您提出一个新的 SO 问题。

【参考方案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>