Question

I have a button set up that when clicked, expands the page. Here is the code:

/*Source:http://rpardz.com/blog/show-hide-content-jquery-tutorial*/

jQuery('.open-content').hide().before('<div class="container_12"><a href="#" id="toggle-content" class="button"><div id="expand-button" ></div></a></div><div id="toggle-top" style="width:100%"></div>');
jQuery('a#toggle-content').click(function() {
    jQuery('.open-content').slideToggle(1000);
    return false;
});

It works nicely as you can see: Hidden: http://cl.ly/101v0N0W1z2D2e0x3a0j Expanded: http://cl.ly/1Z2Q1d3Y2z2X3G1j1v2G

Notice (see the scroll on the side of the images) how the bottom of page expands to show more content; what I can’t figure out is how to make the page auto scroll to the bottom of the now visible content after the page finishes expanding..

I use this standard script to smooth scroll to places on the page..

/*Source: http://goo.gl/DaRfF */
jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

});

but I cannot see how to integrate this so that it automatically scrolls to the bottom of the content after it finishes expanding. All help is greatly appreciated, thanks!

Answer 1

what about something like this?

jQuery('.open-content').slideToggle(1000, function(){
   var offset = jQuery('.open-content').offset();
   var y = offset.top + jQuery('.open-content').height();
   var wheight = $(window).height()
   var scroll = y - wheight;
   $(document).animate({scrollTop:scroll}, 500);
});