Question

So I am currently using this solution to scroll a div to the bottom by writing something like

$(document).ready(function() {
    $('#comment_list').scrollTop($('#comment_list').scrollHeight)
}

But I noticed that when I try to .append() something to #comment_list then do the above code. It doesn’t actually scroll to the bottom (maybe the .scrollHeight is a static value?).

For example, this won’t work

$('#comment_list').append('<div>something</div>').scrollTop($('#comment_list').scrollHeight)

Neither will this

$('#comment_list').append('<div>something</div>')
$('#comment_list').scrollTop($('#comment_list').scrollHeight)

Do I need to use some other “trick” or something?

Any tips and suggestions welcomed. Thanks in advance!

Answer 1

This should do the trick:

$('#comment_list').append( '<div>something</div>' );
$('#comment_list').scrollTo( '100%' );

Check this jsFiddle sample.

Source