How can I auto-scroll as content is added to a div?

Question

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll. The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest. Ideas?

Accepted Answer

You can use `scrollTop` method after each text addition:

```
$("div").scrollTop($("div").children().height());
```

Use inner block to get the true height.

DEMO: http://jsfiddle.net/eyY5k/1/

How can I auto-scroll as content is added to a div?

Solution

Problem