How to scroll a div to the bottom after appending something to that div?

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!

Have you tried $("#comment_list").scrollTo('100%');? – 0x6A75616E Apr 27 '12 at 15:41 — 0x6A75616E, Apr 27 '12 at 15:41

score 3 · Accepted Answer · edited May 23 '17 at 11:55

3

This should do the trick:

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

Check this jsFiddle sample.

Source

edited May 23 '17 at 11:55

Community

1
1

answered Apr 27 '12 at 15:43

0x6A75616E

4,696
2
33
57

How do I download `scrollTo`? The jQuery plugin site is kind of confusing. I got as far as [here](http://archive.plugins.jquery.com/node/8283), but I don't see any download links. I also looked at the [demo](http://demos.flesler.com/jquery/scrollTo/), but I don't see any download links there either... – hobbes3 Apr 28 '12 at 22:53
I believe this to be a DOM function.. The jsFiddle sample doesn't make use of any plugins. – 0x6A75616E Apr 30 '12 at 00:24
1

It wasn't part of the DOM. I actually found the latest version 1.4.2 [here](http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js). – hobbes3 Apr 30 '12 at 08:03

score 0 · Answer 2 · answered Apr 27 '12 at 15:49

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:

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

HTH

How to scroll a div to the bottom after appending something to that div?

2 Answers2