Home > jQuery > Using jQuery to scroll to the bottom of a div, revised

Using jQuery to scroll to the bottom of a div, revised


I am a firm believer that every day you should learn something new.  In this particular case, I learned something new quite some time ago and just never applied it to my code samples.  This is something I really want to pay more attention to because I do not want be a purveyor of misinformation.

Nick commented on this original post that once the animation began he could not scroll back up to the top of the post.  Looking into the problem I immediately noticed what was happening, the scrollHeight attribute was not taking into account the height of the scrolling div.  If the scrolling div has a height of 100px initially and enough text has been entered to scroll it, it may have a scrollHeight of 120px.  Moving down to the bottom of the div, the scrollTop would be 20px which is the scrollHeight – $(‘#div’).height().  Adjusting for that in the jQuery code will make it function as expected.

The corrected code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Scroller</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 500px; height: 100px; overflow: auto; border: 1px solid black;"></div>
<input type="text" id="myTextInput" />
<input type="button" value="Send" id="postButton" />
<div id="info"/>
<script type="text/javascript">
 $(document).ready(function(){
  $('#postButton').click(function(){
   $('#myDiv').append($('#myTextInput').val() + '<br/>');
   $('#myTextInput').val('');
   $("#myDiv").animate({ scrollTop: $("#myDiv").attr("scrollHeight") - $('#myDiv').height() }, 3000);
  });
 });
</script>
</body>
</html>

Update 9/5/2011:
As JP points out in the comments below, this may need to be modified to work with jQuery 1.6.1
http://stackoverflow.com/questions/6194837/somediv-attrscrollheight-not-working-in-jquery-1-6-1

About these ads
Categories: jQuery
  1. June 8, 2010 at 5:58 am | #1

    Thank you so much, this code helped me a lot in my small chat app.

  2. peter
    October 11, 2010 at 8:02 pm | #2

    thanks so much.. totally what i was looking for!

  3. Karl
    January 6, 2011 at 5:28 am | #3

    Thanks, the animated scroll was just what I was looking for (I’m using jQuery 1.4.4 min)

  4. SAm
    April 27, 2011 at 2:29 pm | #4

    Hey None of your [expletive removed] demos work…

    • April 28, 2011 at 8:38 am | #5

      Thanks for the comment SAm. I just moved my servers to AmazonWS and I have not had time move my rewrite filters over. I will get that corrected.

  5. hollins
    August 4, 2011 at 9:19 am | #6

    The revised demo is broken. please can you tell me whether this will work with .net aspmenu. i am trying to add the scroller to the submenu items, as we have some very long menu items and would like to control with up and down scroller. any help is appreciated thanks

    • August 4, 2011 at 1:41 pm | #7

      Sorry, currently the scrolling “demo” is baked into the example chat application. The chat uses the same jQuery code to automatically advance the chat window down when a new message arrives. That way the newest messages will always be visible, which is the way I like my chat applications to behave.

      As to whether or not it would be applicable to .net aspmenu, I am not quite certain as I have never used it. However, the code I have is javascript so it is server agnostic; there is no reason it _wouldn’t_ run.

  6. JP
    September 5, 2011 at 11:51 am | #8

    It’s possible that your demo doesn’t work anymore for jQuery 1.6+. :(

    http://stackoverflow.com/questions/6194837/somediv-attrscrollheight-not-working-in-jquery-1-6-1

    • feebe
      October 28, 2011 at 9:34 am | #9

      Yes, it doesn’t work with jquery 1.6.1 +
      I am also working on a solution, but haven’t found one yet :(

      • October 28, 2011 at 9:37 am | #10

        Have you checked the stackoverflow link on this? I believe it provides a workaround. I will update the jQuery version on my demo site and verify this.

      • January 12, 2012 at 7:01 am | #11

        you just need to change attr(“scrollHeight”) to prop(“scrollHeight”). That’s what worked for me. Nice post btw.

  7. ron
    July 13, 2012 at 10:34 pm | #12

    nice job! But why is the scroll bar moving very slowly, how can I make it move faster.

  8. asher
    July 12, 2013 at 4:40 pm | #13

    When I used your code it actually made things worse. Now when I fill the div, it doesn’t scroll down to the bottom and it doesn’t allow you to scroll in the div at all

    • July 12, 2013 at 10:00 pm | #14

      $(‘#div’).prop(‘scrollTop’, $(‘#div’).prop(‘scrollHeight’));

      Try that, it should work with newer versions of jQuery

  1. March 12, 2010 at 7:58 am | #1
  2. January 3, 2011 at 8:47 am | #2

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

Follow

Get every new post delivered to your Inbox.

Join 765 other followers

%d bloggers like this: