Chat box, auto scroll to bottom
<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>