JQuery - scroll down to a div on a slide

Question

I am trying to scroll to the bottom of a div when a user clicks on a link to push the div down.

I tried using scrollTo and animate

$('html, body').animate({ scrollTop: $("#elementID").offset().top }, 2000); 

but nothing happens

heres the fiddle

http://jsfiddle.net/CLzfW/29/

Answer 1

Demo: http://jsfiddle.net/CLzfW/4/

 $('.button').click(function(e){ e.preventDefault(); $('.expander').slideToggle(); $('html, body').animate({ scrollTop: 1000 }, 2000); }); 

Just use .expander height.
If you need this to be a variable, you can do this: http://jsfiddle.net/CLzfW/26/

 var scroll_to = $('.expander').offset().top + $('.expander').height(); $('.button').click(function(e){ e.preventDefault(); $('.expander').slideToggle(); $('html, body').animate({ scrollTop: scroll_to }, 2000); }); 

Answer 2

Demo

USING:

 $('html, body').animate({scrollTop: $(document).height()}, 'slow'); 

UPDATE

Scrolling Demo Div

Use this, the trick is in scrollHeight see my answer here How to get the "auto" height of the DIV .

 $('.button').click(function(e){ e.preventDefault(); $('.expander').slideToggle(); $('.expander ').animate({scrollTop: $('.expander')[0].scrollHeight}, 'slow'); $('html, body').animate({scrollTop: $(document).height()}, 'slow'); }); 

Scrolling Based on div scroll height

Answer 3

 $("#something").click(function() { $('html, body').animate({ scrollTop: $("#element").offset().top }, 1000); }); 

You use the class name instead of id. You must go to a unique item.

Answer 4

try this instead.

  $('.button').click(function(e){ e.preventDefault(); $('.expander').slideToggle(); $("html, body").animate({ scrollTop: $(document).height() }, 2000); }); 

demo http://jsfiddle.net/CLzfW/17/