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>

使用JQuery slidetoggle（）时屏幕不向下滚动

2 个答案: