如何减慢 Scroll-Top Speed答案

【问题标题】：How to make slow the Scroll-Top Speed如何减慢 Scroll-Top Speed
【发布时间】：2016-02-14 16:01:15
【问题描述】：

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

当它到达顶部时，如何让它更慢或更流畅？

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

使用 jquery animate()

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

参考这个stack overflow question

【讨论】：

谢谢，但是如何通过你的代码调用我的插件呢？想要我的插件的解决方案。
您的插件正在运行.. remove display:none;来自 div
是的，我知道，但它的最高速度非常快，我正在尝试让它变慢，如何做到这一点？
你设置毫秒而不是'慢'.. $('html,body').animate({ scrollTop: 0 }, 1000);或 $('html,body').animate({ scrollTop: 0 }, 2000);
我有 tryid 但无法正常工作。 jQuery(document).ready(function() { jQuery("body").addScrollTop(); }, 5000);

【解决方案2】：

仅适用于 CSS：

html {
  scroll-behavior: smooth;
}

【讨论】：

谢谢，它就像一个魅力。我一直在寻找 jQuery 代码来实现这种平滑效果，但没有一个起作用。
@Prathamesh Doke Cool ?，感谢这些美丽的短语 :)
对不起，不能解决移动设备的滚动问题。谢谢
可以在我的 android 手机上找到适合我的作品，包括 Firefox 和 Chrome。完美的解决方案。
这不控制速度；它只是应用默认速度。

【解决方案3】：

使用 jQuery

如果您愿意，您可以自定义希望“滚动”持续多长时间。或者在滚动效果完成后做其他事情。

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

并且想要滚动到具有“开始”类的元素

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

您拥有 500 的最后一部分。您可以在那里设置您希望效果持续多长时间。以毫秒为单位。

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

【讨论】：