jquery animation does not animate

Question

i have some jquery code that will load the chatbox of my site every second (so if any new posts arrive they become visible)

my code is here

function loadLog(){     
    $.ajax({
        url: "/log.html",
        cache: false,
        success: function(html){        
            $("#chatbox").html(html); //Insert chat log into the #chatbox div           
            if($("#chatbox").attr("scrollHeight") + 20 > $("#chatbox").attr("scrollHeight") - 20){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
            }               
        },
    });
}

everything works fine, except it is meant to autoscroll to the bottom of the chatbox so you see the newest posts, instead it just stays at the top.

I am using the most recent version of jQuery

Answer 1

There is no such attribute scrollHeight (it's property). What if you try something like this instead:

$box.animate({scrollTop: $box[0].scrollHeight}, 'normal');

http://jsfiddle.net/dfsq/zBdas/

Another tip: make sure you cache your DOM queries like $box = $("#chatbox") , don't reselect elements again and again.