I wrote this little code segment to illustrate the idea of what I want. I'd like to be able to automatically scroll the DIV to the bottom when you add stuff to it.

<html>
<head>
<title>Auto Scrolling Div</title>
<head>
<script type="text/javascript">
<!--
function addStuff() {
    var stuff = document.getElementById('foo').value;
    oldStuff = document.getElementById('bar').innerHTML;
    newStuff = oldStuff + ' ' + stuff;
    document.getElementById('bar').innerHTML = newStuff;
}
-->
</script>
</head>
<body>
<div id="bar" style="overflow: auto; height: 150px; width: 100px;">
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
</div>
<input type="text" id="foo">
<input type="submit" value="Add Stuff" onclick="addStuff()">
</body>
</html>

So, you type something in and click Add Stuff. It will scroll to the bottom so you can see what you just added. That would be awesome.

Thanks in advance

I'm an idiot. this post doesn't go here. :-/