CODEWITHSUNDEEP
javascriptjquery
Tauseef
Tauseef

Reputation: 43

How can Slow down scroll to top event by jQuery animate

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);
});

Upvotes: 3

Views: 7914

Answers (3)

Slava Fomin II
Slava Fomin II

Reputation: 28611

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.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try it like,

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

Upvotes: 0

Related Questions