Question

I’m working on an application that includes Ajax chat. New messages get appended to the bottom of the chat window, under which there is a textbox and button allowing the user to send new messages. Each new row is appended in an animated matter using jQuery slide() on the content of the row (in my case, a p element).

After the page has filled with messages, the user keeps having to scroll down in order to see new messages and the textbox. I would like to save the user the trouble by automatically scrolling down while appending new messages.

I’m able to achieve this using animate() just after the slide() as per below:

    newRow.find("p").slideDown();
    $('html, body').animate({
        scrollTop: $('#Bottom').offset().top
    });

It works, but the result is somewhat jumpy. Any advice on how to make the slide and animate work together so that the overall animation is smooth?

EDIT: You can see it working and play around with it at http://jsfiddle.net/tzA4d/1/. Wait a few seconds until the messages reach the bottom of the screen and you’ll see the not-so-smooth scrolling.

Answer 1

You can make scrollTop in the animate “step” callback function

row.find("p").hide(); 
lastRow.before(row); 
row.find("p").animate({"height":"toggle", "padding-top":"toggle","padding-bottom":"toggle"}, 
    { duration: 400,
      step: function(now, fx) {                
               $('html, body') .scrollTop($('#Bottom').offset().top);
            } 
    });