Scroll to the bottom of the content in a div

Question

I have a div which is a chat window. As people send messages and they are appended to the end of the content I want the content to scroll to the bottom (so the latest chat message is visible).

<div id="chat">

</div><!--chat end-->

What exactly do you mean at the bottom? The scrollbar should be on one sides of the div from top to bottom... — Lix, Aug 23 '12 at 15:20
On second thoughts... maybe you should take a look at this answer - http://stackoverflow.com/a/270628/558021 — Lix, Aug 23 '12 at 15:25
Just append the Content to the div and try the following: http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div — Christoph, Aug 23 '12 at 15:26

score 0 · Answer 1 · answered Aug 23 '12 at 15:31

0

You can use jQuery.scrollTop().

http://api.jquery.com/scrollTop/

Hope it helps.

answered Aug 23 '12 at 15:31

Lucas Lazaro

1,516
9
13

score 0 · Accepted Answer · answered Aug 23 '12 at 15:36

You can animate the CSS value scrollTop to the content height (or scrollHeight) of the container.

Here is the example code and I've used it in this fiddle: http://jsfiddle.net/aHx2Z/

// get the new height of the chat window
var height = $('#chat_window')[0].scrollHeight;
$('#chat_window').animate({scrollTop:height}, 1000); // you could use .css() instead if you don't want it to animate

Scroll to the bottom of the content in a div

2 Answers2