自动滚动到聊天框的底部div

I have made private chat system with php and ajax, but I had a problem with scrolling div for the messages that the scroll bar must be at the bottom as default.but it scroll a little and stop.

What is my mistake?

<div id="box" style="height:400px">
  <span><?php echo $sender_name  ?></span>
  <div id="content" class="w3-container w3-margin-top " style="height:370px;overflow:auto">
  </div>
</div>

$(document).ready(function(e) {
  $("#send").click(function() {
    var message = $("#text").val();
    var id = $("#id").val();
    $.post("app/check-send.php", {
      msg: message,
      pop: id,
      send: true
    });
    $("#text").val("");
    return false;
  });

  function showmsg() {
    var id2 = $("#id").val();
    $.post("app/showmsg.php", {
      pop: id2,
      send: true
    }, function(data) {
      $("#content").html(data);
    });
  }

  setInterval(showmsg, 1000);
  });
  $(document).ready(function(a) {
    $('#content').animate({
      scrollTop: $('#content').get(0).scrollHeight
    }, 1500);
  });