如何自动向下滚动聊天框 (div)？

Question

I've been working on a chat application and now I need to scroll automatically when a message appears. I've tried different things but they do not work unfortunately. So this is my main.js code:

var lastTimeID = 0;

$(document).ready(function() {
  $('#btnSend').click( function() {

    sendChatText();
    $('#chatInput').val("");
  });
  startChat();
});

function startChat(){
  setInterval( function() { getChatText(); }, 2000);

}

function getChatText() {
  $.ajax({
    type: "GET",
    url: "/refresh.php?lastTimeID=" + lastTimeID
  }).done( function( data )
  {
    var jsonData = JSON.parse(data);
    var jsonLength = jsonData.results.length;
    var html = "";
    var message = $('#view_ajax');
    for (var i = 0; i < jsonLength; i++) {
      var result = jsonData.results[i];
      html += '<div>(' + result.chattime + ') <b>' + result.usrname +'</b>: ' + result.chattext + '</div>';
      lastTimeID = result.id;

    }
    $('#view_ajax').append(html);
    message.html(data);
      message.scrollTop(message[0].scrollHeight);

  });
}

function sendChatText(){
  var chatInput = $('#chatInput').val();
  if(chatInput != ""){
    $.ajax({
      type: "GET",
      url: "/submit.php?chattext=" + encodeURIComponent( chatInput )
    });
  }
}

I've used

var message = $('#view_ajax');
message.html(data);
message.scrollTop(message[0].scrollHeight);

I really have no clue how jQuery works. I've tried a couple of things before this but it didn't work also.

Do you have any suggestion? Any advice? Do you need any more information? Feel free to ask!

Answer 1

Give each message an ID, as follows:

<div id="msg-1234">

Then you can scroll to this element using this jQuery:

$('html, body').animate({ scrollTop: $('#msg-1234').offset().top }, 'slow');

Alternatively, put a div at the bottom of your chat:

<div id="chat-end"></div>

And scroll to this ID instead.

JSFiddle Demo