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