Using jQuery to Scroll to the bottom of an Element
I have been working on a little AJAX application using jQuery and ColdFusion using JSON to communicate with the page through components. One of the first things I needed to do was to maximize scroll position of a DIV element each time it was updated. Digging around I finally found what I was looking for.
For my benefit, and for anyone else who needs it, assuming you have a div on the page like so:
<div id="myDiv" style="width: 500px; height: 300px; overflow: auto;"></div>
Using jQuery, each time it is updated we could fix the scroll position:
$("#myDiv").attr({ scrollTop: $("#myDiv").attr("scrollHeight") });
And if you would prefer an animated transition, ljpw suggests using:
$("#myDiv").animate({ scrollTop: $("#myDiv").attr("scrollHeight") }, 3000);
$("#myDiv").animate({ scrollTop: $("#myDiv").attr("scrollHeight") }, 3000);
I've tried using scrollabe at first, but at last I use this script...definitely this is what I'm looking for :)