jQuery scroll an element to the bottom

Question

All I can find on the web tells me how to scroll the page to the bottom or to an element.

How is it possible to scroll a specific div which has the style "overflow:auto" to the bottom using jQuery?

Answer 1

demo

var scr = $('#box')[0].scrollHeight;
$('#box').animate({scrollTop: scr},2000);

Answer 2

You can scroll the top, subtract the window height and add the element height. Your scroll should arrive right at the bottom of the element:

$( 'body' ).animate( {
    scrollTop: $( '#element' + currentElementId ).offset().top 
    + $( '#element' + currentElementId ).height() 
    - $( window ).height()
}, 1000 );

Answer 3

Yes:

$("#container").scrollTop($("#elementToScrollTo").position().top);​

If you want to go smoothly:

$("#container").animate({
    scrollTop: $("#elementToScrollTo").position().top
}, 1000);

Here, have a fiddle: http://jsfiddle.net/adrianonantua/nxHE8/