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

About Robert Zehnder

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

Posted on March 10, 2010, in jQuery. Bookmark the permalink. 16 Comments.

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

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

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

  4. Hey None of your [expletive removed] demos work…

  5. 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

    • 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. nice job! But why is the scroll bar moving very slowly, how can I make it move faster.

  7. 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

  1. Pingback: Using jQuery to scroll to the bottom of a DIV « 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

Follow

Get every new post delivered to your Inbox.

Join 867 other followers

%d bloggers like this: