如何有一個div滾動到底部自動

Question

我想提出一個聊天式界面，在這裏可以看到（現在在Chrome中最好看）：

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

的臨時用戶名：密碼temp_guest：密碼

我的問題是，當你點擊聊天之一，它不自動滾動至底部時，我使用此代碼：

$(".messages").attr({ scrollTop: $(".messages").attr("scrollHeight") }); 

什麼可能是錯的？這些消息div有一個CSS：

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

誰的人都在猜測：頁面心不是HTML驗證，但是我將盡快清除它。大多數頁面是自動生成的，這使得代碼看起來很具挑戰性; P

Answer 1

如果您使用的是jQuery 1.6或更高版本，請使用prop而不是attr。

工作例如：http://jsfiddle.net/FishBasketGordo/PNwj3/

Answer 2

我發現了兩個問題。

第一個是你試圖將所有.message DIVs設置爲第一個DIV的高度，所以如果第一個DIV被隱藏，它將不會工作。

第二個是jQuery的attr函數只用於節點屬性。

此方法效果更好，並正確滾動所有的div：

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

或者，您也可以使用這個選擇提高性能：

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

上看到消息的節點其中一期工程。