如何减慢滚动速度 [英] How to make slow the Scroll-Top Speed

问题描述

ScrollTop 是一个 jquery 插件(转到页面顶部)，试图使滚动速度变慢，但不起作用.我已将 scrollSpeed : 'fast', 更改为 scrollSpeed : 'slow', 但它仍然很快，没有任何变化.

JS:

$.fn.extend({addScrollTop:功能(选项){变量默认值 = {useObjWindow : 假，滚动速度:'快'，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>

');}如果(选项.useObjWindow){var parentWindow = this;var scrollWindow = this;}别的 {var parentWindow = 窗口；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();}别的 {if($('.scrollTop-btn').is(":visible")) {$('.scrollTop-btn').hide();}}});});}});

调用:

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

当它到达顶部时，如何使它更慢或更顺畅?

解决方案

use jquery animate()

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

参考这个堆栈溢出问题

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?

解决方案

use jquery animate()

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

refer this stack overflow question

这篇关于如何减慢滚动速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！