title: lock the scroller at the bottom of a div for chat box even after refresh
body: <p>Hey there i have a chat box in my site and i need to lock the scroller always at the bottom so that the new messages are always in front of the user .... i have tried like</p>
  
  <pre><code>  &lt;div id="mainchatdiv" 
   style="overflow-y:scroll; width:100%;height:247px;background-color:#FAF4ED;"&gt;
  
  ...........messagea are here...
  
  
     &lt;/div&gt;
  
  &lt;script&gt;
      var auto_refresh = setInterval(
          function () {
              $('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
          }, 5000);
      $("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
  &lt;/script&gt;
  </code></pre>
  
  <p>the code is working but whenever it refreshes the scroller again goes up....</p>