How can a vertical scroll bar stay at the bottom when text is added continuously?

Question

I have a div and it has a scroll bar here is the code I've used:

<div style="width: 200px; height: 250px; overflow: scroll; overflow-x: hidden; -ms-overflow-x: hidden;" id="container"></div>

There will be more text added to the div but when the div does expand how can I have the vertical scroll bar remain at the bottom of the bar so the user can see the appended text?

Answer 1

You should set the scrollTop to scrollHeight, e.g.: http://jsfiddle.net/fAK2L/1/.

var div = $('div');
div.scrollTop( div.get(0).scrollHeight );

Answer 2

Use element.scrollIntoView for the last added element