javascript - How to scroll a div to the bottom after appending something to that div? - Stack Overflow

admin管理员组

文章数量:1434972

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

Share Improve this question Follow edited May 23, 2017 at 10:33 CommunityBot 111 silver badge asked Apr 27, 2012 at 15:37 hobbes3hobbes3 30.5k2424 gold badges9191 silver badges118118 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

本文标签： javascriptHow to scroll a div to the bottom after appending something to that divStack Overflow