Javascript 如何让div自动滚动到底部

我正在制作一个类似聊天的界面，可以在这里看到（现在最好在Chrome中查看）：

临时用户名：密码为temp\u guest:password

我的问题是，当您单击其中一个聊天时，当我使用以下代码时，它不会自动滚动到底部：

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

有什么不对劲吗？messages div的css为：

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

---

对于那些想知道：页面还没有经过HTML验证，但我很快就会清理它。大部分页面是自动生成的，这对代码的美观是一个挑战；P

如果您使用的是jQuery 1.6或更高版本，请使用

prop

而不是

attr

工作示例：

我发现了两个问题

第一个是您试图将所有

.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; });

---

它在可见的消息节点上工作。

是的，我也刚刚意识到这一点，并修复了我的代码，因此当每个节点都可见时，我将使用FishBasketGordo给我们的工作示例中给出的代码自动将其关闭。