如何让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 DIV设置为第一个DIV的高度，所以如果第一个DIV被隐藏，它就永远不会起作用。

第二个是jQuery的attr函数仅用于节点属性。

此方法效果更好，并正确滚动所有div：

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

或者，您可以使用此选择器来提高性能：

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

适用于可见消息节点。