要素内を常に一番下を表示させたい

チャットを作っています。
メッセージを表示する部分をスクロールで常に一番下を表示させたいのです。
表示件数が少ない時は以下の状態で問題無いのですが、表示件数が増えてくるとスクロールが途中で止まってしまいます。

//JS
function dojQueryAjax() {
$.ajax({
type: "GET",
url: "page_ajax.php",
cache: false,
success: function (data) {
$('#ajaxreload').html(data);
},
error: function () {
alert("通信エラー");
}
});
}
window.addEventListener('load', function () {
setTimeout(dojQueryAjax, 0);
setInterval(dojQueryAjax, 5000);

$('.message_cont').delay(100).animate({
scrollTop: $(document).height()
},100);
});

//HTML
<div id="ajaxreload" class="message_cont">
<!-- ここからpage_ajax.php -->
<div class="ajaxReturn">
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
</div>
<!-- ここまでpage_ajax.php -->
</div>

//CSS
.message_cont {
max-height: 400px;
overflow-y: scroll;
}

こういった場合は、どうすればいいでしょう？
ご教示いただけないでしょうか？

質問者からの補足コメント

• fujillin様
  ありがとうございました。
  ＞.message_cont の要素もスクロールさせる必要がある
  これはスクロール指定してあります。
  ごめんなさい。二つ目はよく理解できません。とりあえず参考にさせていただきます。

  No.1の回答に寄せられた補足コメントです。 補足日時：2020/05/04 22:20

No.1 回答者： fujillin 回答日時： 2020/05/04 22:01

こんばんは

確認できる環境がないので、ご質問文をざっとながめただけですが・・・
2ヶ所ほど問題があるように思われます。

一つ目は、documentの最下部までスクロールするような記述はありますが、チャットの内容が増加した場合には、CSSで .message_cont の高さを制限している関係で、したの方の書き込みは表示されない状態になっているように思えます。
.message_cont の要素もスクロールさせる必要があるのではないでしょうか。

二つ目は（上記にも関連しますが）、新しい書き込みが下に追加されるものと仮定するなら、.message_contをスクロールする記述を内容を書替える毎に行うようにしておく必要があるということになります。
具体的には、ajaxの更新処理の一環として記述しておく必要がありそうです。

ご参考まで。