views:

5278

answers:

5

I want to animate a scroll to the bottom of the viewport with jQuery. Is there a plugin available which isn't overkill (i.e. without a huge feature set for this small task);

Is there a plugin available or a way to do this natively with jQuery?

+4  A: 

Check the jQuery.ScrollTo plugin, you can scroll to determined positions (fixed or absolute), using selectors, DOM elements, and more...

Give a look to the demos...

CMS
A: 

You can look into the scrollTop function. You can create an animation using it and some timer.

Vasil
+16  A: 

jQuery makes things like this so trivial that you just dont need a plugin. Example:

var x = 250; //insert your own formula to calculate where you want to scroll to in px
var t = 500; //arbitrary time in ms
$("body").animate({ scrollTop: x }, t);

Now instead of body you can put any element which scrolls, like a div. t is the time in ms over which the animation will run and x is your position to scroll to in px. Note that this works with scrollLeft also but not scrollRight or scrollBottom (not a limitation of jQuery but JavaScript).

Darko Z
$("#log-output").animate({scrollTop: $("#log-output").height()}, 250); worked great for automagically scrolling to the bottom of a textarea. Thanks!
leek
+3  A: 

you can always do the following line to scroll an element to the bottom

$("body").attr({ scrollTop: $("body").attr("scrollHeight") });
PERR0_HUNTER
+1  A: 

To elaborate on the answers from Darko Z and CMS, here is what I used to animate scrolling to a specific element:

var target = $('#elem');
$('html,body').animate({scrollTop: target.offset().top}, 500);
adam
It works fine for me like this. Thanks :)
Natim