How can I keep a div's scrollbar at the bottom of the div using jQuery?

Question

I have a div called #output, styled with overflow: scroll;. Using jQuery.ajax, it's being updated every x second. I'd like to have it so that when the scrollbar appears (after the divs filled up), it should continously stay at the bottom of the div instead of the top, like most chat clients do.

I'm sure there's a way to do this, I just can't seem to find it.

Here's the Sass

#output
  :margin 0 0 10px 0
  :padding 10px
  :height 500px
  :overflow scroll
  :background #111111
  :border 1px solid #000000
  :color #8e8e8e

and the Haml is just a simple

#output
  = @output

Answer 1

$("#output").attr({ scrollTop: $("#output").attr("scrollHeight") });


$("#output").animate({ scrollTop: $("#output").attr("scrollHeight") }, 3000);  
// animated

See

Using jQuery to Scroll to the bottom of an Element