Lock the scrollbar to the bottom of the page using jQuery?

I am writing a log "tail -f" application using jQuery on the client side. Currently, the application works by making AJAX requests to the server every 2 seconds and appending the new log contents to a pre-existing <PRE> tag on page (inspired by this post). This is all working beautifully.

My problem is tha开发者_StackOverflow中文版t the new content is appended to the page but not immediately displayed. That is, all new log messages simply push the scroll bar higher.

I would like to keep the scrollbar "locked" to the bottom of the page, so that you can watch all the content appear in real time. I had originally been considering using jScrollPane to "lock" the scrollbar is at the bottom, but now I'm thinking that there might be an easier way to keep the focus on the bottom of the page...

You need to make scrollTop = scrollTHeight

var divx = document.getElementById("whatever");
divx.scrollTop = divx.scrollHeight;

Check working example at http://jsfiddle.net/sJshE/3/