title: Chat box scroll to bottom?
body: <p>I have created a simple chatbox using PHP. I want this to be able to load a all the new message and scroll to the bottom of the <code>chatbox</code>. I'm using AJAX to reload the new messages, but cannot seem to make it scroll down to the bottom where the new messages appear.</p>
  
  <p>I have tried using <code>down.scrollTop = down.scrollHeight;</code> but cant get it to function properly. </p>
  
  <p>Any help please?</p>
  
  <pre><code>&lt;div id="tab3"&gt;
      &lt;h2&gt;Chat Room&lt;/h&gt;
  
      &lt;div id="c-input_wrap"&gt;
          &lt;div id="chatlog"&gt;
              Loading chat please wait...
          &lt;/div&gt;
  
  
          &lt;div id="chatwrap"&gt;
              &lt;div id="chatinput"&gt;
                  &lt;form name="chatbox" class="userchat"&gt;
                      &lt;input class="userchat" name="message" type="text" autocomplete="off" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()" autofocus/&gt;&lt;br&gt;
                      &lt;input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var form = document.querySelector('form[name="chatbox"]');
  form.addEventListener("submit", function (event) {
      event.preventDefault();
  });
  
  function submitChat() {
      if(chatbox.message.value == '') {
          alert('Error: Missing Fields.');
          return;
      }
      var message = chatbox.message.value;
      var xmlhttp = new XMLHttpRequest();
  
      xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState==4&amp;&amp;xmlhttp.status==100) {
              document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
          }
      }
      xmlhttp.open('GET','chat.php?message='+message, true);
      xmlhttp.send();
      chatbox.reset();
  }
  
  $(document).ready(function(e) {
      $.ajaxSetup({cache:false});
      setInterval(function() {$('#chatlog').load('logs.php');}, 200);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#tabs {
      overflow: hidden;
      max-width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #tabs li {
      float: left;
      margin: 0px -15px 0 0;
  }
  
  #tabs a {
      float: left;
      position: relative;
      padding: 0 20px;
      height: 0;
      line-height: 30px;
      text-transform: uppercase;
      font-weight: bold;
      text-decoration: none;
      color: #FFFFFF;
      border-right: 20px solid transparent;
      border-bottom: 30px solid #3D3D3D;
      opacity: .3;
      filter: alpha(opacity=30);
      transition: all .5s;
  }
  
  #tabs a:hover,  #tabs a:focus {
      border-bottom-color: rgba(255,0,4,0.60);
      opacity: 1;
      filter: alpha(opacity=100);
  }
  
  #tabs a:focus {
      outline: 0;
  }
  
  #tabs #current {
      z-index: 10;
      border-bottom-color: #3d3d3d;
      opacity: .8;
      filter: alpha(opacity=100);
      cursor: default;
  }
  
  #content {
      background-color: rgba(0,0,0,0.10);
      border-top: 3px solid rgba(61,61,61,0.80);
      padding: 2em;/*height: 220px;*/
      overflow-y: auto;
      height: 85%;
  }
  
  #content h2,  #content h3,  #content p {
      margin: 0 0 15px 0;
  }
  
  #chatlog {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      padding: 0;
      text-align: left;
      font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      color: #000000;
      background-color: rgba(255,255,255,0.70);
      border-top: solid 2px rgba(235,0,3,0.70);
      width: 95%;
      height: 88%;
      overflow-y: auto; 
      word-wrap: break-word;
  }
  
  #c-input_wrap {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      padding: 0;
      height: 63%;
  }
  
  #chatinput {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 27%;
      right: 25%;
      width: 70%;
  
  }
  
  #chatwrap {
      position: absolute;
      height: 40px;
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      bottom: -10px;
  }
  
  
  
  input.userchat {
      display: inline-block;
      float: left;
      margin-left: 0;
      width: 50%;
      padding: 10px;
      border: none;
      border-bottom: solid 2px #3D3D3D;
      transition: border, background-color .75s;
      background-color: rgba(255,255,255,0.70);
      font-weight: bold;
      line-height: 18px;
      color: #000000;
  }
  
  input:focus.userchat {
      background-color: rgba(255,255,255,0.90);
      border-bottom: solid 2px rgba(235,0,3,0.69);
      outline: 0;
      color: rgba(61,61,61,1.00);
      font-weight: bold;
  }
  
  input[type=button].userchat {
      display: block;
      margin-top: -23px;
      margin-left: 2px;
      text-align: center;
      padding-left: 2px;
      float: left;
      width: 40px;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      color: rgba(61,61,61,0.70);
      font-size: 16px;
      background: rgba(255,255,255,0.70); 
      border-bottom: solid 2px #3D3D3D;
      cursor :pointer;
      transition: all .75s;
  }
  
  input[type=button].userchat:hover,
  input[type=button].userchat:focus  {
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      color: #000000;
      font-size: 16px;
      border-bottom: solid 2px rgba(235,0,3,0.69);
      background: rgba(255,255,255,0.90); 
      cursor: pointer;
  }
  </code></pre>
  
  <p>chat.php:</p>
  
  <pre><code>&lt;?php
      error_reporting(E_ALL &amp; ~E_NOTICE);
      session_start();
  
      if  (isset($_SESSION['id'])) {
          $userId = $_SESSION['id'];
          $username = $_SESSION['username'];
          $userLabel = $_SESSION['nickname'];
      }
  
      $connect = mysqli_connect("", "", "", "webclyde_root");
      mysqli_select_db($connect, "webclyde_root");
      $message = $_REQUEST['message'];
  
      mysqli_query($connect, "INSERT INTO chat (name, message) VALUES ('$userLabel', '$message')");
  
      $result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
      while ($extract = mysqli_fetch_assoc($result1)) {
          echo $extract['name'] . ": " . $extract['message'];
      }
  ?&gt;
  </code></pre>
  
  <p>logs.php</p>
  
  <pre><code>&lt;?php
      error_reporting(E_ALL &amp; ~E_NOTICE);
      session_start();
  
      if  (isset($_SESSION['id'])) {
          $userId = $_SESSION['id'];
          $username = $_SESSION['username'];
          $userLabel = $_SESSION['nickname'];
      }
  
      $connect = mysqli_connect("", "", "", "webclyde_root");
      mysqli_select_db($connect, "webclyde_root");    
      $result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
      while ($extract = mysqli_fetch_assoc($result1)) {
          echo "&lt;br&gt;" . $extract['name'] . ": " . $extract['message'];
      }
  ?&gt;
  </code></pre>