How can Slow down scroll to top event by jQuery animate

Question

How can Slow down scroll to top event by jQuery animate?

$('#go-to-top').click(function() {
   $(window.opera ? 'html' : 'html, body').animate({
      scrollTop: 0
    }, 80);
});

@FritsvanCampen it's true that scrollTop isn't a CSS property, but jQuery is nice enough to take care of that for you, so OPs code does work. — Rory McCrossan, Oct 01 '13 at 11:56
Possible duplicate of http://stackoverflow.com/questions/5417080/html-animate-scrolltop-document-height-slow-if-its-at-the-b and http://stackoverflow.com/questions/2123690/slow-down-scroll-to-top-event-by-jquery-animate — Rohan Kumar, Oct 01 '13 at 12:02

score 1 · Answer 1 · answered Oct 01 '13 at 11:58

To slow down the scroll you can increase the time it takes to complete the animation. Currently, it's taking 80ms. If you change that number to 1 second, you can see the difference:

$('#go-to-top').click(function () {
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
    }, 1000); // scroll takes 1 second
});

Example fiddle

You can also add easing effects if you have included the jQueryUI easing library in your page.

score 0 · Answer 2 · answered Oct 01 '13 at 11:57

0

Try it like,

$('#go-to-top').click(function() {
    $(window.opera ? 'html' : 'html, body').animate({
      scrollTop: 0
    },2000);// for 2 seconds
});

answered Oct 01 '13 at 11:57

Rohan Kumar

40,431
11
76
106

FYI duration comes after the settings object. – Rory McCrossan Oct 01 '13 at 11:59

Slava Fomin II · Accepted Answer · 2013-10-01T12:06:42.947

Here's the documentation for the animate method.

You can use "duration" argument to change animation speed and you can provide some custom easing function with the "easing" argument to change animation behavior.

In your case you can do the following to specify animation "speed".

$('#go-to-top').click(function() {
   $(window.opera ? 'html' : 'html, body').animate({
      scrollTop: 0,
   }, 1500); // 1500 here is the duration of animation in the milliseconds (seconds * 1000)
});

I would also recommend to replace window.opera with the jQuery's $.browser.webkit for a better compatibility. See the docs.

How can Slow down scroll to top event by jQuery animate

3 Answers3