Question

我遇到了this非常容易使用并实现了jquery插件，可以在网站上实现平滑滚动，以帮助了解视差效果。

现在要实现它我创建了一个只是

的.js脚本

$(document).ready(function(){
    // $fn.scrollSpeed(step, speed, easing);
    jQuery.scrollSpeed(100, 800);

});

根据说明。整个插件显然有它自己的.js文件，我想我会包含的内容，

// Custom scrolling speed with jQuery
// Source: github.com/ByNathan/jQuery.scrollSpeed
// Version: 1.0.2

(function($) {

    jQuery.scrollSpeed = function(step, speed, easing) {

        var $document = $(document),
            $window = $(window),
            $body = $('html, body'),
            option = easing || 'default',
            root = 0,
            scroll = false,
            scrollY,
            scrollX,
            view;

        if (window.navigator.msPointerEnabled)

            return false;

        $window.on('mousewheel DOMMouseScroll', function(e) {

            var deltaY = e.originalEvent.wheelDeltaY,
                detail = e.originalEvent.detail;
                scrollY = $document.height() > $window.height();
                scrollX = $document.width() > $window.width();
                scroll = true;

            if (scrollY) {

                view = $window.height();

                if (deltaY < 0 || detail > 0)

                    root = (root + view) >= $document.height() ? root : root += step;

                if (deltaY > 0 || detail < 0)

                    root = root <= 0 ? 0 : root -= step;

                $body.stop().animate({

                    scrollTop: root

                }, speed, option, function() {

                    scroll = false;

                });
            }

            if (scrollX) {

                view = $window.width();

                if (deltaY < 0 || detail > 0)

                    root = (root + view) >= $document.width() ? root : root += step;

                if (deltaY > 0 || detail < 0)

                    root = root <= 0 ? 0 : root -= step;

                $body.stop().animate({

                    scrollLeft: root

                }, speed, option, function() {

                    scroll = false;

                });
            }

            return false;

        }).on('scroll', function() {

            if (scrollY && !scroll) root = $window.scrollTop();
            if (scrollX && !scroll) root = $window.scrollLeft();

        }).on('resize', function() {

            if (scrollY && !scroll) view = $window.height();
            if (scrollX && !scroll) view = $window.width();

        });       
    };

    jQuery.easing.default = function (x,t,b,c,d) {

        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    };

})(jQuery);

现在我的问题是，每当我刷新页面时{} {}}

然后点击我的某个导航栏链接，或者如果我在页面的一半处刷新，它会重置滚动开始位置并将页面向上推到顶部，然后才能滚动到任何位置。我可以使用当前的scrollTop或吗？

替换这些.js文件中的数字

干杯

Answer 1

该插件显然跟踪 root 变量中的当前滚动顶部偏移量，当您在页面加载时调用jQuery.scrollSpeed时，它会初始化为0.

所以我建议在该函数的顶部附近更改以下行：

        var ...
            root = 0,

由：

        var ...
            root = $window.scrollTop(),

经过进一步分析，此插件还有其他一些需要改进的地方：

它捕获resize事件以设置 view 变量，但这是无用的，因为其余代码在使用之前也会设置该变量。
它定义了 scrollSpeed 范围内的几个变量，它们更好地限定为 mousewheel 事件处理程序，因为它们在其他地方没有用
它跟踪 root 变量中的滚动偏移量，也在 scroll 事件处理程序中，但最好只在现场请求它只要有需要。这使得 scroll 事件处理程序变得不必要。
它会跟踪 scroll 变量中是否正在滚动动画，但它的值永远不会被读取，也不会被曝光。所以我建议删除它。可以通过$('html,body').is(':animated');
它具有非常类似的水平和垂直滚动代码，所以很遗憾这不是在一个代码块中完成的。

总而言之，插件的改进版本变得更短，看起来像这样：

(function($) {
    jQuery.scrollSpeed = function(step, speed, easing) {
        var $d = $(document),
            $w = $(window),
            $body = $('html, body')
            root = 0;
        if (window.navigator.msPointerEnabled) { return false }

        $w.on('mousewheel DOMMouseScroll', function(e) {
            var maxY = $d.height() - $w.height(),
                animation = {};
            animation[maxY > 0 ? 'scrollTop' : 'scrollLeft'] = root = 
                Math.min(maxY > 0 ? maxY : Math.max(0, $d.width() - $w.width()),
                    Math.max(0,
                        ($body.is(':animated') ? root : maxY > 0 ? $d.scrollTop() : $d.scrollLeft()) 
                        + Math.sign(-e.originalEvent.wheelDeltaY || e.originalEvent.detail) * step));
            $body.stop().animate(animation, speed, easing || 'default');
            return false;
        });
    };

    jQuery.easing.default = function (x,t,b,c,d) {
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    };
})(jQuery);

Answer 2

var $document = $(document),
    $window = $(window),
    $body = $('html, body'),
    option = easing || 'default',
    root = 0,
    scroll = false,
    scrollY = $document.height() > $window.height(),
    scrollX = $document.width() > $window.width(),
    view;

看看scrollY和scrollX变量。原来的jQuery.scrollSpeed插件现在不在顶部重置。

平滑滚动jquery插件在刷新时重置滚动起始点。有没有办法解决这个问题？

2 个答案: