如何减慢页面回到顶部的滚动速度

Question

ScrollTop是一个jQuery插件（返回页面顶部），旨在实现缓慢滚动，但无法正常工作。我已将scrollSpeed: 'fast'更改为scrollSpeed: 'slow'，但速度仍然很快，没有任何变化。

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

            });


        });
    }

});

电话：

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

如何使页面在滚动至顶部时变得更加平滑或缓慢？

- Aariba

Answer 1

使用jQuery的animate()方法

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

请参考这个stackoverflow问题

- Azad

---

谢谢，但是如何通过你的代码调用我的插件？我想要解决方案来调用我的插件。 - Aariba

你的插件正在运行。请从 div 中移除 display:none;。 - Azad

是的，我知道，但它的速度非常快，我正在尝试让它变慢，怎么做？ - Aariba

你可以设置毫秒数来代替'slow'.. $('html,body').animate({ scrollTop: 0 }, 1000); 或者 $('html,body').animate({ scrollTop: 0 }, 2000); - Azad

我已经尝试过，但不起作用。jQuery(document).ready(function() { jQuery("body").addScrollTop(); }, 5000); - Aariba

Answer 2

仅使用CSS：

html {
  scroll-behavior: smooth;
}

- Husam Ebish

---

谢谢，它完美地运作了。我一直在寻找jQuery代码来实现这种平滑效果，但是没有一个有效。 - Prathamesh Doke

@Prathamesh Doke 很酷，谢谢你提供这些美丽的短语 :) - Husam Ebish

抱歉亲爱的，在移动设备上无法解决滚动问题。谢谢。 - Kamlesh

在我的安卓手机上，使用Firefox和Chrome都能完美运行。是一个完美的解决方案。 - ralhei

这不控制速度；它只应用默认速度。 - Kalnode

Answer 3

使用jQuery

如果您想要自定义“滚动”持续的时间，或者在滚动效果完成时执行其他操作。

我有一个：<a href="#" class="scrollToTop">

并希望滚动到一个类名为“beginning”的元素。

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

在最后一个部分，你可以设置效果持续多长时间。以毫秒为单位。 http://api.jquery.com/animate/

- Simon Berton

Answer 4

将 'slow' 替换为 - 例如 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);

- Cristian Florescu