Using jQuery to scroll to the bottom of a DIV


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:

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);

EDIT: Post has been revised
https://kisdigital.wordpress.com/2010/03/10/using-jquery-to-scroll-to-the-bottom-of-a-div-revised/

Edit 2: jQuery 1.6+ notes
Wilson pointed out in the blog comments that the script should be modified for newer versions of jQuery:

The .attr() must be replaced with .prop() as of jquery 1.6
Advertisements

24 thoughts on “Using jQuery to scroll to the bottom of a DIV

  1. Noice, spent like 2-3 hours trying to figure this out through css, js, anything. Much appreciated

  2. Thanks for this!
    Helps me alot : )

    $(“html body”).animate({ scrollTop: $(“html body”).prop(“scrollHeight”) }, 3000);

    working like a charm for me : )

    greetz

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s