Screen does not scroll when using jQuery slidetoggle ()

Question

I have a site that has .slidingDiv called, which, when the .show_hide anchor is clicked, appears and slides down, which is great when it is the only content on the page.

If there is other content above this div, it does not scroll down and does not show. Instead, it shows a div, but it is off-site, so it really works, but does not push the rest of the content.

Here's 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> 

Thank you very much

Pete

Answer 1

Setting scrollTop in the callback to the slideToggle function or after the slideToggle function slideToggle been called (as you did) results in unstable behavior at best. If you are looking for smooth animation, it’s best to start the slide and then scroll down the animate page. This is evidenced by fiddle . Here is 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

Just check before 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>