title: Creating an AJAX chat with advanced scrolling features. How?
body: <p>I need some usage examples for how to accomplish this. I have some HTML:</p>
  
  <pre><code>&lt;div id="chatDisplay"&gt;
  &lt;/div&gt;
  &lt;input type="text" id="message" /&gt;&lt;input type="button" id="send" value="Send" /&gt;
  </code></pre>
  
  <p>Then I have some JQuery:</p>
  
  <pre><code>// This function sets up the ajax that posts chat messages to the server.
  $(function()
  {
       $('#send').click(function ()
       {
            $.ajax(
            {
                 url: "chat/postmsg",,
                 data: { msg: $('#message').val(); },
                 type: "POST",
                 success: function (response)
                 {
                      // Server sends back formated html to append to chatDisplay.
                      $('#chatDisplay').append(response);
                      //scroll to bottom of chatDisplay
                 }
            });
       });
  });
  
  // This function periodically checks the server for updates to the chat.
  $(function ()
  {
       setInterval(function()
       {
            $.ajax(
            {
                 url: "chat/getupdates",
                 type: "POST",
                 success: function (response)
                 {
                           // Server sends back any new updates since last check.
                           // Perform scroll and data display functions. Pseudo-code to follow:
  
                           // If (chatDisplay is scrolled to bottom)
                           // {
                           //     append response to chatDisplay
                           //     scroll to bottom of chatDisplay
                           // }
                           // else if (chatDisplay is scrolled up from bottom by any amount)
                           // {
                           //     append response to chatDisplay, but do not scroll to bottom.
                           // }
                 }
            });
       }, 7000);
  });
  </code></pre>
  
  <p>This is just an example of basic chat features, excluding server-side code of course. What I need is a usage sample of how to accomplish what the pseudo-code describes. How do I detect if the user is scrolled to the bottom of the DIV, and how do I scroll them to the bottom? I don't want them to be jumped to the bottom of the DIV if they are scrolling up to look at chat history.</p>
  
  <p>I have heard of JQuery's ScrollTo plugin, but just need some examples.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>EDIT:</strong> Here is the solution for those interested.</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>Go to <a href="http://www.jsfiddle.net/f4YFL/4/" rel="nofollow">http://www.jsfiddle.net/f4YFL/4/</a> for an example of this in action.</p>