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
Thank you so much, this code helped me a lot in my small chat app.
thanks so much.. totally what i was looking for!
Thanks, the animated scroll was just what I was looking for (I’m using jQuery 1.4.4 min)
Hey None of your [expletive removed] demos work…
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.
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.
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
Yes, it doesn’t work with jquery 1.6.1 +
I am also working on a solution, but haven’t found one yet
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.
you just need to change attr(“scrollHeight”) to prop(“scrollHeight”). That’s what worked for me. Nice post btw.
nice job! But why is the scroll bar moving very slowly, how can I make it move faster.