title: how to make ul scroll down when full?
body: <p>I have a <code>&lt;ul&gt;</code> defined as</p>
  
  <pre><code>&lt;ul id="messages"&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>I do not have any <code>&lt;li&gt;</code> items defined in html but in my javascript I use jquery to add <code>&lt;li&gt;</code> items to the <code>&lt;ul&gt;</code></p>
  
  <pre><code>$("#messages").append("&lt;li&gt;" + string + "&lt;/li&gt;");
  </code></pre>
  
  <p>When I keep adding messages it does not automatically scroll down to the newest added li items when it has too many li items to fit the screen. How do I get the li to scroll down? </p>