Keeping the scroll to bottom

Question

I have a shoutbox and I want to keep the scroll to bottom same as IM windows.

My html is

<div id="shoutContainer">
            <table id="shoutbox">
                <tbody>
                      <!-- shouts here -->
                </tbody>
            </table>
    </div>

My css

#shoutContainer {
    height: 100px; overflow-y: scroll;
}

If its not possible through html and css. Can we achieve this in raw javascript? because I am not using any framework

Answer 1

Whenever an item is added, do the following:

document.getElementById('shoutContainer').scrollTop = 10000;
// or some other big number

edited