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?
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.com/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.