how can I make a html scrollbar start at the bottom?

Question

I'm trying to make a scrollable area for a chatbox, but my scrollbar starts at the top and not the bottom. This means you see all the first messages, but not all the new ones until you scroll down. This chatbox is going to get a lot of messages, so the bar needs to start at the bottom.

This is what I got so far in JQuery, but it's not working

$('#chatbox').each(function(){
                $(this).scrollTop($(this).prop('scrollHeight'));
            });

So how do I get a scrollbar to stay at the bottom of the scroll?

Edit: Now using this code. it goes to around the middle, but not the bottom.

$('#chatbox').animate({ 
                   scrollTop: $('#chatbox').height()}, 0
                );

Answer 1

Okay I figured it out. This is the code that got it working:

$('#chatbox').animate({ 
                   scrollTop: $("#chatbox").prop("scrollHeight")}, 0
                );

Or for non-animated:

            $("#chatbox").prop({ scrollTop: $("#chatbox").prop("scrollHeight") });