How To Always See Bottom Line When Append Text To A Div?

Possible Duplicate: Use jQuery to scroll to the bottom of a div with lots of text I use div to append context that user chat, however, I found that whenever update chat context,

Solution 1:

You could append each new line in a < span > and, after appending it, give it the focus. The scrollbar will automatically go down to the < span > with focus.

EDIT: Sorry, missed the jquery tag. Use .scrollTop(). Here's the documentation: http://api.jquery.com/scrollTop/

Solution 2:

I just threw this together: http://jsfiddle.net/purmou/Bk5vV/

I made it so that when you click the "Send" button (which simulates a chat box), it appends "New Chat Content" to the end of the scrollable div, and also scrolls to the end of the div using the jQuery scrollTo plugin.

Here's the jQuery:

$(document).ready(function() {
   $("#newchat").click(function() {
      $("#scroll").append("<br>New chat content.");
      $("#scroll").scrollTo('100%');
   }); 
});

More on ScrollTo here: http://plugins.jquery.com/project/ScrollTo