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:

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

You can see a demo here:http://demos.kisdigital.com/index.cfm/demos/scroll

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

About Robert Zehnder

Web application developer specializing in ColdFusion/Railo and Open Source development.

Posted on November 12, 2009, in jQuery. Bookmark the permalink. 24 Comments.

  1. can you show us an example of what you mean?

  2. Thank you!
    It’s awesome! 😀

  3. Slight problem I’ve noticed…

    When it’s at the bottom of a scrolled div, you can’t scroll back up! 😦

  4. Thanks for this example? This will be very handy for my browser game 🙂

  5. Thanks Robert that was very helpful.

  6. Thanks ,

    I am Searching for this and it ends here.
    Keep it up bro.

  7. The Ultimation

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

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

  9. Curious Nepali

    that’s like a short and awesome tutorial . . Thanks man . .

  10. Thanks for this!
    Helps me alot : )

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

    working like a charm for me : )

    greetz

  11. Thx – helped me out!

  12. THIS works. Thank you! Perfect for scrolling a div with dynamic content added with append.

  13. Excellent, great work!

  14. More simple variant:
    $(‘#myDiv’).scrollTop(9999999)

  1. Pingback: Using jQuery to scroll to the bottom of a div, revised « KISDigital Blog

  2. Pingback: 2010 in review « KISDigital Blog

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: