html - Creating an AJAX chat with advanced scrolling features. How? -

i need usage examples how accomplish this. have html:

<div id="chatdisplay"> </div> <input type="text" id="message" /><input type="button" id="send" value="send" /> 

then have jquery:

// function sets ajax posts chat messages server. $(function() {      $('#send').click(function ()      {           $.ajax(           {                url: "chat/postmsg",,                data: { msg: $('#message').val(); },                type: "post",                success: function (response)                {                     // server sends formated html append chatdisplay.                     $('#chatdisplay').append(response);                     //scroll bottom of chatdisplay                }           });      }); });  // function periodically checks server updates chat. $(function () {      setinterval(function()      {           $.ajax(           {                url: "chat/getupdates",                type: "post",                success: function (response)                {                          // server sends new updates since last check.                          // perform scroll , data display functions. pseudo-code follow:                           // if (chatdisplay scrolled bottom)                          // {                          //     append response chatdisplay                          //     scroll bottom of chatdisplay                          // }                          // else if (chatdisplay scrolled bottom amount)                          // {                          //     append response chatdisplay, not scroll bottom.                          // }                }           });      }, 7000); }); 

this example of basic chat features, excluding server-side code of course. need usage sample of how accomplish pseudo-code describes. how detect if user scrolled bottom of div, , how scroll them bottom? don't want them jumped bottom of div if scrolling @ chat history.

i have heard of jquery's scrollto plugin, need examples.

thanks in advance!

edit: here solution interested.

success: function (response) {      var elem = $('#chatdisplay');      var atbottom = (elem[0].scrollheight - elem.scrolltop() == elem.outerheight());      $('#chatdisplay').append(response);      if (atbottom)           $('#chatdisplay').scrolltop($('#chatdisplay')[0].scrollheight); } 

go http://www.jsfiddle.net/f4yfl/4/ example of in action.

seems can refactor pseudo-code this:

append response chatdisplay if(chatdisplay @ bottom){ scroll bottom }

here link of how determine if scrolled bottom:

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

hope helps.

bob