DaniWeb IT Discussion Community - Auto Scrolling DIV tags

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