Scroll to top of the page using jquery animate

Question

I want to put to the top bottom of the page which should scroll the page to the top. However I want the scrolling process to have animated effect. I think it is possible by using animate but have no idea how to ?

Please help. Thanks

score 46 · Accepted Answer · edited Mar 10 '15 at 15:34

46

The way is pretty simple. Put a button at the bottom of the page and write an event something like this

$('#spnTop').on("click",function() {
    $('html, body').animate({ scrollTop: 0 }, 'slow', function () {
        alert("reached top");
    });
});

Here is the fiddle for this

edited Mar 10 '15 at 15:34

Alexandre R. Janini

498
9
20

answered May 02 '13 at 09:47

Paras

2,997
6
35
46

1

my alert("reached top"); is called twice. Is it the same for you guys too? – AliBZ Oct 16 '13 at 21:20
You will probably need a `event.preventDefault();` if you do it on a link. – VDarricau Apr 13 '17 at 16:03

score 7 · Answer 2 · answered May 02 '13 at 09:46

7

You can animate the scrollTop property of the html, body

$('html, body').animate({
    scrollTop: "0px"
}, 800);

I suggest you do some research/reading before you ask trivial questions like these. Google can help you out before all of us can.

answered May 02 '13 at 09:46

painotpi

6,894
1
37
70

11

And Google often points to Stack Overflow for the answer. All questions/answers, trivial or not, belong here. – Doug S May 07 '16 at 03:55

Scroll to top of the page using jquery animate

2 Answers2