title: jquery - scrollTop() not working with setInterval()
body: <p>I'm working on a chat app that gets all the latest messages sent and displays it in a div. What I'm trying to do is use a setInterval method to update the div every second and then using scrollTop to automatically scroll the div to the bottom of the div. But what happens now is that every time the div is refreshed (through setInterval) it starts out at the top again and then uses scrollTop to get to the bottom but then a second later it refreshes again. This makes the div jolt up and down every second which makes even more impossible to read whatever's going on at the bottom of the div. Here's my code:</p>
  
  <pre><code>&lt;script&gt;
      setInterval(refreshChat, 1000);
  
      function refreshChat(){
          var allMsgDiv = $('#allMsgs');
          allMsgDiv.scrollTop(20000);
          $.ajax({
              url: '${createLink(action: 'renderChat')}',
              type: 'GET',
              failure: function(){alert("Oops, something went wrong :o")},
              success: function(html){$('#bodyContainer').html(html)}
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The ajax function calls a Grails function but I think that's irrelevant to problem at hand. Here's the div (#allMsgs):</p>
  
  <pre><code>&lt;div name="allMsgs" id="allMsgs" class="form-control" style="height: 250px;"&gt;
  &lt;g:each in="${latestMsg}" var="msg"&gt;
      &lt;ul&gt;
          &lt;g:if test="${msg.type == "msgLogin"}"&gt;
              &lt;li&gt;&lt;span class="datetext"&gt;(&lt;g:formatDate date="${msg.date}" format="dd/MM HH:mm"/&gt;) ${msg.username} ${msg.message}&lt;/span&gt;&lt;/li&gt;
          &lt;/g:if&gt;
          &lt;g:if test="${msg.type == "msgUser"}"&gt;
              &lt;li&gt;&lt;span class="datetext"&gt;(&lt;g:formatDate date="${msg.date}" format="dd/MM HH:mm"/&gt;)&lt;/span&gt; &lt;span id="usernametext"&gt;${msg.username}&lt;/span&gt;: ${msg.message}&lt;/li&gt;
          &lt;/g:if&gt;
          &lt;g:if test="${msg.type == "msgLogout"}"&gt;
              &lt;li&gt;&lt;span class="datetext"&gt;(&lt;g:formatDate date="${msg.date}" format="dd/MM HH:mm"/&gt;) ${msg.username} ${msg.message}&lt;/span&gt;&lt;/li&gt;
          &lt;/g:if&gt;
      &lt;/ul&gt;
  &lt;/g:each&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please tell me that there's a way to do this that doesn't make my messages-container look like it's having a spasm. Thanks in advance.</p>
  
  <p><strong>Edit:</strong> Oh yeah, I forgot, the only css at play here is with #allMsgs which is:</p>
  
  <pre><code>#allMsgs{
      overflow: auto;
  }
  </code></pre>