How to have a div scrolled to the bottom automatically

I am making a chat-like interface which can be seen here (best viewed in Chrome right now):

http://qas.im/web/sms.php

The temporary username:password is temp_guest:password

My problem is that when you click one of the chats, it doesnt automatically scroll to the bottom when I use this code:

$(".messages").attr({ scrollTop: $(".messages").开发者_开发问答attr("scrollHeight") });

What could be wrong? The messages div has a css of:

.messages {
    height:400px;
    overflow: auto;
}

For people who are wondering: Page isnt HTML validated yet but I will be cleaning it up soon. Most of the page is auto-generated which is challenging to make the code look pretty ;P

If you are using jQuery 1.6 or later, use prop instead of attr.

Working example: http://jsfiddle.net/FishBasketGordo/PNwj3/

I found two issues.

The first is that you were trying to set all .message DIVs to the height of the first DIV, so if the first DIV was hidden, it would never work.

The second was that jQuery's attr function is only for node attributes.

This method works better, and scrolls all the divs correctly:

$(".messages").each(function(idx, node) { node.scrollTop = node.scrollHeight; });

Alternatively, you can improve performance by using this selector:

$(".messages:visible").each(function(idx, node) { node.scrollTop = node.scrollHeight; });

Which works on visible message nodes.