title: Auto Scroll to bottom of div after ajax request
body: <p>None of the answers in here work before people start marking as duplicate! </p>
  
  <p>The poll function is a php file, simply gets the content of a text file, I want the browser to scroll to the bottom of the div content once the request (fires every 3 seconds) has completed. Here is some code</p>
  
  <pre><code>  &lt;div id="content_div_id"&gt;
  
   &lt;/div&gt;
  
  &lt;script&gt;
  $(function() {
    startRefresh();    
      });
      function startRefresh() {
          setTimeout(startRefresh,3000);
          $.post('pollchat.php', function(data) {
              $('#content_div_id').html(data);
          });
  
      }
  </code></pre>
  
  <p></p>
  
  <p>My problem is after the 3 second refresh it is at the top of the chat content again. . . .</p>
  
  <p>The entire thing is nested inside a window like so:</p>
  
  <pre><code>&lt;div class="portlet-body chat-widget" style="overflow-y: auto; width: auto; height: 300px;"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12"&gt;
                                      &lt;p class="text-center text-muted small"&gt;January 1, 2014 at 12:23 PM&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div id="content_div_id"&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>