title: Chat box, auto scroll to bottom
body: <p>How to auto scroll chat box</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;    
  &lt;meta name="robots" content="noindex"&gt;
  &lt;title&gt;College Enquiry Chat&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link href="assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
  
  &lt;script src="assets/js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          window.alert = function(){};
          var defaultCSS = document.getElementById('bootstrap-css');
          function changeCSS(css){
              if(css) $('head &gt; link').filter(':first').replaceWith('&lt;link rel="stylesheet" href="'+ css +'" type="text/css" /&gt;'); 
              else $('head &gt; link').filter(':first').replaceWith(defaultCSS); 
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
              &lt;div class="panel panel-primary" style="border:0px"&gt;
                  &lt;div class="panel-heading top-bar"&gt;
                      &lt;div class="col-md-8 col-xs-8"&gt;
                          &lt;h3 class="panel-title"&gt;&lt;span class="glyphicon glyphicon-comment" style="margin-right:6px;"&gt;&lt;/span&gt;College Enquiry Chat&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
                  &lt;div class="panel-body msg_container_base"&gt;
  
                      &lt;div class="row msg_container base_sent"&gt;
                          &lt;div class="col-md-10 col-xs-10"&gt;
                              &lt;div class="messages msg_sent"&gt;
                                  &lt;p&gt;that mongodb thing looks good, huh?
                                  tiny master db, and huge document store&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="row msg_container base_receive"&gt;
                          &lt;div class="col-md-10 col-xs-10"&gt;
                              &lt;div class="messages msg_receive"&gt;
                                  &lt;p&gt;that mongodb thing looks good, huh?
                                  tiny master db, and huge document store&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;chat_log&gt; . &lt;/chat_log&gt;
                  &lt;/div&gt;
  
                  &lt;!--CHAT USER BOX--&gt;
                  &lt;div class="panel-footer"&gt;
                      &lt;div class="input-group" id="myForm"&gt;
                          &lt;input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..."&gt;
                          &lt;span class="input-group-btn"&gt;
                          &lt;button class="btn btn-primary btn-sm" id="submit" type="submit"&gt;Send&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>    &lt;script&gt;
  $("#submit").click(function() {
      var data = $("#btn-input").val();
          //console.log(data);
          $('chat_log').append('&lt;div class="row msg_container base_sent"&gt;&lt;div class="col-md-10 col-xs-10"&gt;&lt;div class="messages msg_receive"&gt;&lt;p&gt;'+data+'&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row msg_container base_receive"&gt;&lt;div class="col-md-10 col-xs-10"&gt;&lt;div class="messages msg_receive"&gt;&lt;p&gt;'+data+'&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
          clearInput();
  });
  
  function clearInput() {
      $("#myForm :input").each(function() {
          $(this).val(''); //hide form values
      });
  }
  
  $("#myForm").submit(function() {
      return false; //to prevent redirection to save.php
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.msg_container_base{
    background: #e5e5e5;
    margin: 0;
    padding: 0 10px 10px;
    max-height:80vh;
    overflow-x:hidden;
  }
  .top-bar {
    background: #666;
    color: white;
    padding: 10px;
    position: relative;
    overflow: hidden;
  }
  .msg_receive{
      padding-left:0;
      margin-left:0;
  }
  .msg_sent{
      padding-bottom:20px !important;
      margin-right:0;
  }
  .messages {
    background: white;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    max-width:100%;
  }
  .messages &gt; p {
      font-size: 13px;
      margin: 0 0 0.2rem 0;
    }
  .messages &gt; time {
      font-size: 11px;
      color: #ccc;
  }
  .msg_container {
      padding: 10px;
      overflow: hidden;
      display: flex;
  }
  img {
      display: block;
      width: 100%;
  }
  .avatar {
      position: relative;
  }
  .base_receive &gt; .avatar:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border: 5px solid #FFF;
      border-left-color: rgba(0, 0, 0, 0);
      border-bottom-color: rgba(0, 0, 0, 0);
  }
  
  .base_sent {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .base_sent &gt; .avatar:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border: 5px solid white;
      border-right-color: transparent;
      border-top-color: transparent;
      box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close
  }
  
  .msg_sent &gt; time{
      float: right;
  }
  
  
  
  .msg_container_base::-webkit-scrollbar-track
  {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  .msg_container_base::-webkit-scrollbar
  {
      width: 12px;
      background-color: #F5F5F5;
  }
  
  .msg_container_base::-webkit-scrollbar-thumb
  {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #555;
  }
  
  .btn-group.dropup{
      position:fixed;
      left:0px;
      bottom:0;
  }
  </code></pre>
  
  <p>Following code functions shows, what user input and when click on send, user will see, his sended messaged in two way.. one in sended &amp; received form.</p>
  
  <p>Is there a way to auto-scroll to bottom</p>