title: Scroll to bottom of Div using jquery if Ajax returns success
body: <p>I have this Div which includes the users messages where the newest message is right at the very bottom of the Div and initiates a scroll bar if the messages start to go lower than the div height:</p>
  
  <pre><code>  &lt;div class="list-group-message" style="overflow-y: scroll;height:385px;width:680px"&gt;  
  &lt;div id="content"&gt; 
      /// My messages
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I am using Jquery from my js folder to bring the scroll bar to the bottom of the messages on Page load to show the newest message:</p>
  
  <pre><code>var $content = jQuery(".list-group-message");
  $content.scrollTop($content[0].scrollHeight);
  </code></pre>
  
  <p>This works well, unless a new message is added to the page, the scroll bar won't automatically scroll down again unless you refresh the page or unless you add a new message. So you have to manually scroll down everytime you get a new message.</p>
  
  <p>I am using an automatic Div reload script to show new messages:</p>
  
  <pre><code>&lt;script&gt;
  setInterval(function() {
      $("#content").load(location.href+" #content","");
  }, 5000);
  &lt;/script&gt;
  </code></pre>
  
  <p>And I am using this Ajax script to add new replies:</p>
  
  <pre><code>&lt;script&gt; 
  function loadDoc() {
    $.ajax({
              url: 'system/reply_system.php',
              type: 'POST',
              dataType: 'json',
              data: $('#reply').serialize(),
          })
          .done(function() {
  
              $.ajax({
                  url: 'system/sars_system.php',
                  type: 'POST',
                  dataType: 'json',
                  data: $('#reply').serialize(),
              })
              .done(function() {
                  console.log("success");
  
              })
              .fail(function() {
                  console.log("error");
              })
  
          })
          .fail(function() {
              console.log("error");
          })
  }
  &lt;/script&gt; 
  </code></pre>
  
  <p>Is there a way I can set up the Jquery to run on success of my Ajax so that the scroll bar will be sent to the bottom upon a new message, something like this, which I have tried and found it doesn't work:</p>
  
  <pre><code>    &lt;script&gt; 
      function loadDoc() {
        $.ajax({
                  url: 'system/reply_system.php',
                  type: 'POST',
                  dataType: 'json',
                  data: $('#reply').serialize(),
              })
              .done(function() {
                var $content = jQuery(".list-group-message");
  $content.scrollTop($content[0].scrollHeight);
  
                  $.ajax({
                      url: 'system/sars_system.php',
                      type: 'POST',
                      dataType: 'json',
                      data: $('#reply').serialize(),
                  })
                  .done(function() {
                      console.log("success");
                      var $content = jQuery(".list-group-message");
                      $content.scrollTop($content[0].scrollHeight);
  
                  })
                  .fail(function() {
                      console.log("error");
                  })
  
              })
              .fail(function() {
                  console.log("error");
              })
      }
      &lt;/script&gt; 
  </code></pre>
  
  <p>Additional code included as requested:</p>
  
  <pre><code>&lt;div class="list-group-message" style="overflow-y: scroll;height:385px;width:680px"&gt;   
  
   &lt;div id="content"&gt;                            
  
  
  
  &lt;?
  $res6=mysqli_query($conn, "SELECT * FROM ap_messages WHERE conversation_id = '$conversation_id' ORDER BY time_sent ASC");
  while($row6=mysqli_fetch_array($res6))
  {   
   $me_message = $row6['message'];
   $me_message_id = $row6['message_id'];
   $me_sender_id = $row6['sender_id'];
   $todaysdate = date('d/m/Y');
   $me_time_sent_date = date('d/m/Y', strtotime($row6['time_sent']));
   $me_time_sent_date_and_time = date('d/m/Y H:i:s', strtotime($row6['time_sent']));
   $me_time_sent_time = date('H:i', strtotime($row6['time_sent']));
   if($todaysdate == $me_time_sent_date){
       $me_time = ''.$me_time_sent_time.'';
   } else {
      $me_time = ''.$me_time_sent_date.' '.$me_time_sent_time.''; 
   }
  
  
   $me_time_read = $row6['time_read'];
  $res7=mysqli_query($conn, "SELECT * FROM ap_users WHERE user_id = '$me_sender_id'");
  while($row7=mysqli_fetch_array($res7))
  {   
   $me_first_name = $row7['first_name'];
   $me_last_name = $row7['last_name'];
    $me_display_img = $row7['display_img'];
  }
  
  mysqli_query($conn, "UPDATE ap_messages SET time_read = NOW() WHERE message_id = '{$me_message_id}' AND time_read = '0000-00-00 00:00:00' AND conversation_id = '$co_conversation_id' AND sender_id != '$user_id'");
  ?&gt;  
  
  
  
  
  &lt;div class="media" style="max-width: &lt;? echo $screenwidth; ?&gt;px;"&gt;
    &lt;div class="media-left"&gt;
      &lt;a href="#"&gt;
        &lt;img src="userimg/&lt;? echo $me_display_img; ?&gt;" alt="user" width="64px" height="64px" hspace="10px" class="media-object" align="left"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="media-body" style="position: relative !important;"&gt;
      &lt;div style="display:inline"&gt;&lt;b&gt;&lt;a href=""&gt;&lt;? echo ''.$me_first_name.' '.$me_last_name.''; ?&gt;&lt;/a&gt;&lt;/b&gt;&lt;/div&gt; &lt;div align="right" style="float:right; display:inline"&gt; &lt;? echo $me_time; ?&gt; &lt;/div&gt;&lt;br&gt;
      &lt;? echo $me_message; ?&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;?
  }
  ?&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;form action="" method="post" id="reply" name="reply" onsubmit="loadDoc()"&gt;
  &lt;div class="form-group"&gt;
   &lt;textarea class="form-control" rows="3" cols="80" id="message" name="message" placeholder="Send a reply..."&gt;&lt;/textarea&gt;
   &lt;input type="hidden" id="conversation_id" name="conversation_id" value="&lt;? echo $co_conversation_id; ?&gt;"&gt;
   &lt;input type="hidden" id="sarssystem" name="sarssystem" value="&lt;? echo $sarssystem; ?&gt;"&gt;
    &lt;input type="hidden" id="user_id" name="user_id" value="&lt;? echo $user_id; ?&gt;"&gt;
  &lt;/div&gt;
  &lt;div class="form-group" align="right"&gt;
  
  &lt;div class="btn-group" align="left" style="float:left"&gt;
    &lt;button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
      &lt;span class="glyphicon glyphicon-cog" aria-hidden="true"&gt;&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="messages.php?convoid=&lt;? echo $co_conversation_id; ?&gt;&amp;del=check"&gt;Delete Conversation&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Visit Profile&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Report User&lt;/a&gt;&lt;/li&gt;
      &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Change Display Photo&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
    &lt;button type="reset" class="btn btn-default btn-sm"&gt;Cancel&lt;/button&gt;
    &lt;button type="submit" class="btn btn-primary btn-sm"&gt;Send Message&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  setInterval(function() {
      $("#content").load(location.href+" #content","");
  }, 5000);
  &lt;/script&gt;
  
  
  
   &lt;script&gt; 
  function loadDoc() {
   $.ajax({
    url: 'system/reply_system.php',
    type: 'POST',
    dataType: 'json',
    data: $('#reply').serialize(),
    success: function(data) {
  
      console.log("success");
      var $content = $(".list-group-message");
      $content[0].scrollTop = $content[0].scrollHeight;
  
      // Second ajax
      $.ajax({
        url: 'system/sars_system.php',
        type: 'POST',
        dataType: 'json',
        data: $('#reply').serialize(),
        success: function(data) {
          $content[0].scrollTop = $content[0].scrollHeight;
        },
        error: function(e) {
           //called when there is an error
           console.log('fail');
        }
      });
  
    },
    error: function(e) {
      //called when there is an error
      console.log('fail');
    }
  });
  }
  &lt;/script&gt; 
  
  
  
                          &lt;/div&gt;
  </code></pre>