屏幕不向下滚动使用JQuery的slideToggle（）

时，我有一个网站，存在被点击的锚.show_hide当它出现并滑下这是伟大的，当它是页面上的唯一内容的名为.slidingDiv。屏幕不向下滚动使用JQuery的slideToggle（）

如果有其他内容上面这个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>

非常感谢

皮特

来源

2012-12-14 Pete Naylor

[JSHint（http://jshint.com）和[jQuery的]（HTTP： //api.jquery.com/）文档可帮助往往多... – yckart

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

来源

2012-12-14 14:27:35

下面这个脚本中，DIV被触发后，屏幕滚动下来，我可以滚动备份几次尝试后，页面变得神经质，像它不让我滚动。 –

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

scrollTop的前只是做一个检查

<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 

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

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

 
}); 
 

 
</script>

来源

2015-04-15 07:08:42 user3119274

屏幕不向下滚动使用JQuery的slideToggle（）

回答

相关问题