加载元素后滚动到div的底部？

Question

与this question 类似，我也有一个带有 div 的页面，该页面在点击时会充满聊天风格的气泡 - 每次点击都会出现一个新的“气泡”。它们都包含在没有设定高度的 .content div 中。

但是，如果其中一个气泡加载到浏览器窗口高度以下，则页面不会自动向下滚动，而且我有几个人抱怨他们不知道应该加载更多内容.

按照我发布的问题中的建议，我尝试将此脚本添加到页面末尾：

$(document).ready(function() {
    $(".content").click(function() {
            $(".content").animate({ scrollTop: $(".content")[0].scrollHeight}, 1000);
    });
});

但它似乎根本没有做任何事情......我错过了什么明显的东西吗？

我也设置了jsfiddle，去掉了每个气泡加载对点击的影响。在点击时向下滚动到 div 底部的效果似乎也不起作用。我是一个超级新手，并试图弄清楚这一切，所以非常感谢任何帮助！在此先感谢

Answer 1

查看我的更新

$(document).ready(function() {
  $(".content").click(function() {
    $("html, body").animate({ scrollTop: $(".content")[0].scrollHeight}, 1000);
  });
});

JSFiddle