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 es up. Is there is a way to have it auto scroll to the bottom whenever a new message is added? Preferably using jQuery?

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 es up. Is there is a way to have it auto scroll to the bottom whenever a new message is added? Preferably using jQuery?

• php
• javascript
• jquery
• ajax

• @Brandon: this question has already been asked and answered; i've added a link to the existing discussion at the top of yours. – Shog9 Commented Apr 12, 2009 at 1:29

4 Answers 4

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

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

For further understanding visit:

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

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

This Jquery plugin will help you.

Jquery ScrollTo plugin demo page