Automatically scrolling a div

Question

I have a div which contains a chat box. Whenever a new message arrives, it is appended to the box - and I want to automatically scroll the box to the bottom (to show the new message). How can I accomplish this?

<div  id="chatting" style="overflow: auto; background-color: #fff; border: solid 2px #dedede; width: 600px;  height: 500px; padding: 10px;">
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
</div>

possible duplicate of [How to auto-scroll to end of div when data is added?](http://stackoverflow.com/questions/7303948/how-to-auto-scroll-to-end-of-div-when-data-is-added) — wirey00, Dec 11 '12 at 17:35
I'm not sure that I understand the question. Do you want the page to be scrolled to the bottom when it loads? — Sam I am says Reinstate Monica, Dec 11 '12 at 17:46

RoccoC5 · Accepted Answer · 2012-12-11T20:06:30.000

You can accomplish this by setting the scrollTop property of the chat window div. To scroll to the bottom of the div, set scrollTop equal to scrollHeight:

var chatWindow = document.getElementById('chating');
chatWindow.scrollTop = chatWindow.scrollHeight;

http://jsfiddle.net/Ln8Hd/

Alternatively, using jQuery:

var chatWindow = $("#chating");
chatWindow.scrollTop(chatWindow[0].scrollHeight);

You'll want to call this each time a chat message has been added to the div.

Automatically scrolling a div

1 Answers1