Прокрутите вниз, когда новый контент будет добавлен в div

Question

Как я могу получить чат для прокрутки вниз, когда новый контент отправляется в чат? Я пытаюсь добавить что-то вроде этого:

$('#what do I have to put here?').animate({scrollTop: $('#and here?').prop("scrollHeight")}, 200); 

, но я не могу заставить его работать (я понятия не имею, где в коде, чтобы поместить его).

Спасибо!

Это важная часть кода ... Может быть, я должен добавить его здесь (но я не знаю, как и где):

<script type="text/javascript"> 
     var _answerBot = new answerBot(); 
     function keypressInput(sender, event) { 
      if (event.which == 13) { 
       document.getElementById('subcontent').innerHTML += _answerBot.processInput(sender.value); 
       sender.value = ''; 


      } 
     } 


    </script> 

Это отдельный scripts.js файл:

var answerBot = function() { 
    var _this = this; 
    _this.processInput = function (text) { 
     updateUrl(text); 
     var _result = "<p class='answerbot-input'>" + text + "</p>"; 
     text = text.replace(new RegExp("[ ]{2,}", "g"), " "); 
     var _words = text.toLowerCase().split(" "); 
     var _answers = []; 
     var _title = ""; 
     if (_words.length === 0 || _words.toString() === '') { //if the input is empty 
      _answers = _this.specialContext.emptyInput; 
      _title = _this.specialContext.emptyInput; 
     } else { 
      var _possibleAnswers = findMatches(_words); 
      if (_possibleAnswers.length === 0) { //if no answer found 
       _answers = _this.specialContext.wrongInput; 
       _title = _this.specialContext.wrongInput; 
      } 
      if (_possibleAnswers.length == 1) { //context recognized 
       _answers = _this.answers[_possibleAnswers[0]].values; 
       _title = _this.answers[_possibleAnswers[0]].description; 
      } 
      if (_possibleAnswers.length > 1) { 
       _result += formatText(_this.specialContext.rephrase, _this.specialContext.rephrase); 
       for (var i = 0; i < _possibleAnswers.length; i++) { 
        _result += formatText(_this.answers[_possibleAnswers[i]].description, _this.answers[_possibleAnswers[i]].description); 
       } 
      } 
     } 
     if (_answers.length > 0) { 
      var _rand = Math.floor((Math.random() - 0.001) * _answers.length); 
      _result += formatText(_answers[_rand], _title); 
     } 
     return _result; 
    }; 

    function formatText(text, title) { 
     return "<p class=\'answerbot-ai\' title=\'" + title + "\'>" + text + "</p>"; 
    } 

    function findMatches(words) { 
     var foundKeywords = []; 
     var _possibleAnswers = []; 
     for (var i = 0; i < _this.keywords.length; i++) { 
      foundKeywords[i] = 0; 
      for (var j = 0; j < words.length; j++) { 
       if (_this.keywords[i].keys.indexOf(words[j]) >= 0) { 
        foundKeywords[i]++; 
        if (foundKeywords[i] == _this.keywords[i].keys.length) { 
         return [_this.keywords[i].value]; 
        } 
       } 
      } 
      if (foundKeywords[i] * 2 > _this.keywords[i].keys.length) { 
       _possibleAnswers.push(_this.keywords[i].value); 

      } 
     } 
     return _possibleAnswers.filter(function (elem, pos) { 
      return _possibleAnswers.indexOf(elem) == pos; 
     }); 
    } 

    function updateUrl(text){ 
     history.pushState(null, null, "#question=" + encodeURIComponent(text)); 
     if(typeof ga === "function")//google analytics 
      ga('send', 'event', 'question', text); 
    } 
}; 

Answer 1

function AddMessage() { 
 
    var $message = $("<p>").text("message"); 
 
    var $messages = $("#messages"); 
 
    $messages.append($message); 
 
    $messages.animate({ 
 
    scrollTop: $messages.prop("scrollHeight") 
 
    }); 
 
}

#messages { 
 
    border: 1px solid #000; 
 
    height: 100px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="chat"> 
 
    <div id="messages"></div> 
 
    <button onClick="AddMessage()">Add Message</button> 
 
</div>