如何减慢Scroll-Top Speed

时间:2015-11-13 05:32:26

标签: javascript jquery scroll

ScrollTop是一个jquery插件(转至页面顶部),尝试降低Scroll Speed,但无法正常工作。我已将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();
});

当它到达顶部时,如何让它变得更慢或更平滑?

3 个答案:

答案 0 :(得分:10)

使用jquery animate()

x86_64

参考此stack overflow question

答案 1 :(得分:5)

如果你想要,你可以自定义你想要多长时间滚动&#34;持续或者在滚动效果完成时执行其他操作。

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

想要滚动到一个带有类&#34;开头&#34;

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

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

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

答案 2 :(得分:2)

仅适用于CSS:

html {
  scroll-behavior: smooth;
}