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

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

But I noticed that when I try to .append() something to #ment_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

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

Neither will this

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

Do I need to use some other "trick" or something?

Any tips and suggestions weled. Thanks in advance!

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

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

But I noticed that when I try to .append() something to #ment_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

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

Neither will this

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

Do I need to use some other "trick" or something?

Any tips and suggestions weled. Thanks in advance!

• javascript
• jquery

• 2 Have you tried $("#ment_list").scrollTo('100%');? – 0x6A75616E Commented Apr 27, 2012 at 15:41

2 Answers 2

This should do the trick:

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

Check this jsFiddle sample.

Source

The scrollTop function is called on $(document).ready() event.

This event is not fired when you append content to the DIV on the client-side.

So, after you append the content, you need to call the scrollTop once again to set it correctly:

$('#ment_list').append('<div>something</div>');
$('#ment_list').scrollTop('100%');

HTH