thoughts, ideas, code and other things...

Sunday, December 27, 2009

Simple Scrolling down in jQuery

Well tried getting jQuery ScrollTo plugin to work, and I couldn't. Anyways that looks like a pile of mess and in my case I don't want to scroll anywhere other than bottom of an element.
Eric's blog mentions a very clean way to do it -
 var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

and what I am doing is precisely the same but by using jQuery animate -
$("#chatbox").animate ({scrollTop:$("#chatbox").attr('scrollHeight')},500);

The good this about this one is, that it actually scrolls down smoothly :)
Looks great if you are popping out small divs at bottom of a container as in my case -
$(gimeMeADiv("Hello World")).hide().appendTo("#chatbox").show(400);
$("#chatbox").animate ({scrollTop:$("#chatbox").attr('scrollHeight')},500);

One noticeable point is that, always keep .animate()'s time period greater than .show()'s, otherwise it won't scroll completely to the base and the new element hasn't grown yet.
This is the chatbox div where I am populating messages with auto scrolling :) -

Labels: ,


At December 28, 2009 at 3:06 AM , Anonymous Anonymous said...

Brim over I assent to but I think the post should have more info then it has.

At December 28, 2009 at 3:38 AM , Blogger Abhishek Mishra said...

I think a demo would be good? I'm working on something that would show you the use of this :)


At January 9, 2010 at 4:06 AM , Anonymous Anonymous said...

I will not concur on it. I assume warm-hearted post. Particularly the appellation attracted me to read the sound story.

At February 23, 2010 at 2:25 AM , Blogger Abhishek Mishra said...

Here is a detailed demonstration -



Post a Comment

Subscribe to Post Comments [Atom]

<< Home