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" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Scroller</title>
<script src=""></script>
<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">
   $('#myDiv').append($('#myTextInput').val() + '<br/>');
   $("#myDiv").animate({ scrollTop: $("#myDiv").attr("scrollHeight") - $('#myDiv').height() }, 3000);

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


16 thoughts on “Using jQuery to scroll to the bottom of a div, revised

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

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

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

Leave a Reply

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

You are commenting using your 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 )


Connecting to %s