How to make slow the Scroll-Top Speed

Question

ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.

JS:

$.fn.extend({

    addScrollTop: function(options) {

        var defaults = {
                useObjWindow : false,
                scrollSpeed : 'fast',
                zIndex: '99'
            }

            var options = $.extend(defaults, options);  

        if($('body').find('.scrollTop-btn').length == 0) {
            $('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
        }

        if(options.useObjWindow) {
            var parentWindow = this;
            var scrollWindow = this;
        }
        else {
            var parentWindow = window;
            var scrollWindow = 'html, body';
        }

        $(document).ready(function() {

            $('.scrollTop-btn').on('click', function() {
                $(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
            });

            $(parentWindow).scroll(function() { 
                $('.scrollTop-btn').hide();
                var aTop = $('.scrollTop-btn').height() + 20;

                if($(this).scrollTop() >= (aTop + 20)) {
                    $('.scrollTop-btn').css('z-index', options.zIndex);
                    $('.scrollTop-btn').show();
                }
                else {
                    if($('.scrollTop-btn').is(":visible")) {
                        $('.scrollTop-btn').hide();
                    }
                }

            });


        });
    }

});

Call:

jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});

How to make it slower or smoother, when it go to top?

score 13 · Accepted Answer · edited May 23 '17 at 11:54

13

use jquery animate()

$('html,body').animate({ scrollTop: 0 }, 'slow');

refer this stack overflow question

edited May 23 '17 at 11:54

Community

1
1

answered Nov 13 '15 at 05:36

Azad

5,144
4
28
56

Thanks, but how to call my plugin by your code? want solution for my plugin. – Aariba Nov 13 '15 at 05:39
your plugin is working.. remove display:none; from div – Azad Nov 13 '15 at 05:49
Yes i know, but it's go to top speed is very fast, I'm trying to make it slow, how to this? – Aariba Nov 13 '15 at 05:52
2

you set milliseconds instead of 'slow'.. $('html,body').animate({ scrollTop: 0 }, 1000); or $('html,body').animate({ scrollTop: 0 }, 2000); – Azad Nov 13 '15 at 06:02
i have tryid but not working. `jQuery(document).ready(function() { jQuery("body").addScrollTop(); }, 5000); ` – Aariba Nov 13 '15 at 06:03
set options.scrollSpeed = 2000. it slow down and I can see it works in my test – Azad Nov 13 '15 at 06:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95011/discussion-between-aabira-and-azzi). – Aariba Nov 13 '15 at 06:05

score 9 · Answer 2 · answered Aug 30 '19 at 15:23

9

Only with CSS:

html {
  scroll-behavior: smooth;
}

answered Aug 30 '19 at 15:23

Husam Ebish

4,893
2
22
38

Thanks, it works like a charm. I was searching for jQuery code to achieve this smooth effect, but none of them worked. – Prathamesh Doke Jan 02 '20 at 11:17
1

@Prathamesh Doke Cool , thanks for these beautiful phrases :) – Husam Ebish Jan 03 '20 at 07:01
Sorry dear, not solve scrolling problem in mobile devices. Thanks – Kamlesh Mar 26 '21 at 13:42
1

Works just find for me on my android phone, both with Firefox and Chrome. Perfect solution. – ralhei Nov 14 '21 at 12:50
This doesn't control speed; it just applies a default speed. – Kalnode Jan 19 '22 at 15:12

score 5 · Answer 3 · edited Jan 19 '22 at 15:13

Using jQuery

If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.

I have a: <a href="#" class="scrollToTop">

And want to scroll to an element with class "beginning"

$('.scrollToTop').on('click', function(event){
      event.preventDefault();
      $('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
 });

The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.

http://api.jquery.com/animate/

score 0 · Answer 4 · answered Jul 23 '22 at 13:16

0

Replace 'slow' with - Ex. 1000, 5000, 10000

$('html,body').animate({ scrollTop: 0 }, <milliseconds>);

// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);

// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);

answered Jul 23 '22 at 13:16

Cristian Florescu

1,660
20
24

How to make slow the Scroll-Top Speed

4 Answers4

Using jQuery

Linked