title: scroll bar to bottom after fetching from mysql
body: <p>I want to move the scroll  bar to bottom after appending/submission of a new text in both side. i.e the scroll bar should be moved to bottom at the user's side who is sending the text and also scroll bar should be moved in the user's side who is receiving the text.</p>
  
  <pre><code>    &lt;?php
  session_start();
  ?&gt;
  &lt;html&gt;  
        &lt;head&gt;  
             &lt;title&gt;Live Table Data Edit&lt;/title&gt;  
             &lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt; 
             &lt;link href="style.css" rel="stylesheet"&gt;        
             &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;  
             &lt;script src="jquery-3.2.1.min.js"&gt;&lt;/script&gt; 
  
        &lt;/head&gt;  
        &lt;body&gt;  
             &lt;div class="container"&gt;  
              &lt;div class="row"&gt;
                  &lt;br /&gt;  
                  &lt;br /&gt;  
                  &lt;br /&gt; 
                  &lt;div class="col-lg-6 col-md-6"&gt;
                  &lt;div class="table-responsive"&gt;  
                       &lt;h3 align="center"&gt;You Are : &lt;?php echo $_SESSION['name']; ?&gt;&lt;/h3&gt;&lt;br /&gt;  
                       &lt;div id="live_data"&gt;&lt;/div&gt;                 
                  &lt;/div&gt; 
                  &lt;/div&gt;
                  &lt;div class="col-lg-6 col-md-6"&gt;
                  &lt;div class="chatbox"&gt;
                  &lt;div id="messages"&gt;&lt;/div&gt; 
                  &lt;div class="area" style="display:none"&gt;
                  &lt;div class="chat-form"&gt;
                  &lt;textarea id="text" name="text"&gt;&lt;/textarea&gt;
                  &lt;button type="submit" id="sub" name="sub"&gt;Send&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
  &lt;script&gt;
  var currentID = null;
  var chatTimer = null;
  var scrolled;
  function fetch_data() {
    $.ajax({
      url: "select.php",
      method: "POST",
      success: function(data) {
        $('#live_data').html(data);
        //fetch_chat();
      }
    });
  }
  
  function fetch_chat() {
  
    $.ajax({
      url: "fetch_chat.php",
      method: "POST",
      data: {
        id: currentID
      },
      dataType: "text",
      success: function(data) {
        $("#messages").show();
        $('#messages').html(data);
        $("div.area").show();
        if(!scrolled){
          $("#messages").animate({ scrollTop: $(document).height() }, "fast");
          scrolled=true;
        }
  
      }
  
    });
  
  }
  
  $(document).ready(function() {
          $("#messages").on('scroll',function(){
          scrolled=true;
      });
   fetch_data();
  
    $(document).on('click', '.first_name', function() {
        scrolled=false;
      currentID = $(this).data("id1");
      fetch_chat(); 
    });
  
  setInterval(function() {
      fetch_chat();
  }, 500);
  
    $("#sub").click(function() {
      var text = $("#text").val();
      $.post('insert_chat.php', {
        id: currentID,
        msg: text
      }, function(data) {
        $("#messages").append(data);
        $("#text").val('');
         $("#messages").animate({ scrollTop: $(document).height() }, "fast");
      });
    });
  
  });
  &lt;/script&gt;
   &lt;/body&gt;  
   &lt;/html&gt;
  </code></pre>
  
  <p>the problem is that whenever a new text is added the text goes down to bottom in both the side and the scroll br remain at its position(but should be moved along the new text). </p>
  
  <p><a href="https://i.stack.imgur.com/2irBA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2irBA.png" alt="here&#39;s a screenshot"></a></p>