AJAX chat, auto scroll window

Question

Duplicate

Scrolling Overflowed DIVs with JavaScript

---

I have an AJAX chat that outputs the messages to a div with overflow: auto so if it gets too long, the scroll bar comes up. Is there is a way to have it auto scroll to the bottom whenever a new message is added? Preferably using jQuery?

Answer 1

it'd be done with the following line

$("#youChatDiv").attr({ scrollTop: $("#youChatDiv").attr("scrollHeight") });

what this does is set the scroll to the height of the own element

just call that with every new message :)

cheers

Answer 2

Property scrollHeight is the ideal but it is not part of the W3C.

For further understanding visit:

http://yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/

Answer 3

If each message is in a separate element (div, paragraph etc.), you can just call scrollIntoView

Answer 4

Hi Brandon, This Jquery plugin will help you.

Jquery ScrollTo plugin demo page