title: Scroll to bottom of div after content refresh
body: <p>When adding new messages on the chat, chat content refreshes adding the new message and moving the scrollbar to the top.
  I am trying to make it stay bottom but can't figure it out alone.</p>
  
  <p>This is in my html page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  &lt;!--
  var iChat_cfg = ["300", "15"];
  
  var iChat_lang = ["Edit messages", "Write a new message", "iChat error", "Write your message.", "Your message text is too long.", "Agree", "Save Settings", "Clear DB", "Check for updates"];
  
  function reFreshiChat()
  {
  iChatRefresh('site');
  return false;
  };
  
  setInterval(reFreshiChat , iChat_cfg[1]*1000);
  //--&gt;
  
  &lt;/script&gt;
  &lt;div id="iChat-style"&gt;
     &lt;div id="iChat-messages" align="left"&gt;
     &lt;div class="chat"&gt;Message 1&lt;/div&gt;
     &lt;div class="chat"&gt;Message 2&lt;/div&gt;
     &lt;div class="chat"&gt;Message 3&lt;/div&gt;
     &lt;div class="chat"&gt;Message 4&lt;/div&gt;
     &lt;div class="chat"&gt;Message 5&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is in my js file:</p>
  
  <pre><code>    function iChatRefresh(place)
  {
  
      $.post(dle_root + "engine/modules/iChat/ajax/refresh.php", { action: "refresh", place: place }, function(data){
  
  if(data != 'no need refresh'){
  
          $("#iChat-messages").html(data);
  
  };
  
  
      });
  
      return false;
  };
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>#iChat-style {
      width:100%;
      height:300px;
      overflow:auto;
  }
  </code></pre>