<p>I am building a utility page for a web app that I am working on.   I have an element that I want to use as a "console" of sorts.</p>

<p>I get entries for the console via Ajax calls (using prototype's <code>Ajax.PeriodicalUpdater</code>).</p>

<p>The problem I'm having is that when I insert new lines to the bottom of the "console", the scrollbar stays in the initial position (so I always see the top lines unless I manually scroll down).</p>

<p>How can I make the scrollbar automatically stay at the bottom?</p>

<p>I am using prototype for a few libraries that require it in this project, so I would prefer to stick with that or regular javascript if possible.</p>

<p>Just as a note, I already tried this:</p>

<pre><code>onComplete: function() { 
    $('console').scrollTop = $('console').scrollHeight;
}
</code></pre>

<p>It <em>almost</em> works, except that it is always "one step behind", and I can't see the most recent item.</p>

```
```
new Ajax.PeriodicalUpdater(container, url, {
    onComplete: function() {
        (function() {
            container.scrollTop = container.scrollHeight;
        }).defer();
    }
});
```
```