1

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, say there are over 100 line in div, but it always shows the first several line depends on the height of div. If you want to see other lines, you have to drag vertical scrollbar, but I want to display the latest context, which is always the last line. How to accomplish that?

Community
  • 1
  • 1
Steven Zack
  • 4,984
  • 19
  • 57
  • 88

2 Answers2

0

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/

Jonathan M
  • 17,145
  • 9
  • 58
  • 91
0

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

Purag
  • 16,941
  • 4
  • 54
  • 75