如何有一个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; }); 

上看到消息的节点其中一期工程。