How can I make html scroll start at the bottom?

Question

I'm trying to create a scrollable area for a chat, but my scrollbar starts at the top, not the bottom. This means that you see all the first messages, but not all new ones, until you scroll down. This chatbox will receive a lot of messages, so the panel should start at the bottom.

This is what I got so far in jQuery, but it doesn’t work

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

So, how do I get the scroll bar to stay at the bottom of the scroll?

Edit: Now use this code. he goes to the middle, but not to the bottom.

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

Answer 1

Ok, I figured it out. This is the code that made it work:

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

Or for non-animated:

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