Animate jQuery scrolltop

Question

I have a scrollTop function in jQuery but I can't animate it. Is it possible?

$(".loadmore").click(function() {
  $(this).toggleClass("up-arrow", 1000);
  $(window).scrollTop($('.docs').offset().top, 2000);
});

Have you tried using `.animate()`? `.scrollTop` doesn't take a duration argument. [jQuery Docs](http://api.jquery.com/scrollTop/) — MrOBrian, Aug 03 '12 at 17:04

score 16 · Accepted Answer · answered Aug 03 '12 at 17:30

16

You can use animate() for this.

Example code applied on a div is as follows :

//Scroll to bottom
$('div').animate({scrollTop: $('div').get(0).scrollHeight}, 3000);

//$('div').get(0).scrollHeight - will give the full height of div.
//scrollTop - will be used to animate from the current position to page end.
//3000 - will be the duration.

Demo can be found here : http://jsfiddle.net/codebombs/GjXzD/

answered Aug 03 '12 at 17:30

Sasidhar Vanga

3,384
2
26
47

Will this give any problem, when we try to scroll while the animation is going on? I am facing such issue, but I have this called in setTimeout(). The scoll seems to get buggy. – Mrinal Saurabh Aug 08 '14 at 07:06

score 4 · Answer 2 · answered May 29 '13 at 07:20

4

$('html, body').animate({ scrollTop: $('.docs').offset().top}, 2000);

answered May 29 '13 at 07:20

Ifeanyi Chukwu

3,187
3
28
32

score -1 · Answer 3 · answered Aug 14 '14 at 08:52

-1

$('#ID').click(function(){
$("html, body").animate({ scrollTop: 0 }, 1000);
return false;         });

Try this code of Jquery

answered Aug 14 '14 at 08:52

loyola

3,905
2
24
18

Animate jQuery scrolltop

3 Answers3

Linked