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

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

现在我的问题是每次刷新页面时:http://danceforovariancancer.com.au

然后单击我的导航栏链接之一，或者如果我在页面的一半处刷新，它会重置滚动开始位置并在您可以滚动到任何地方之前将页面推到顶部。我可以用 current scrollTop 或之类的东西替换这些 .js 文件中的任何一个数字吗？

干杯

Answer 1

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

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

        var ...
            root = 0,

通过:

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

进一步分析，该插件还有一些需要改进的地方:

• 它捕获调整大小事件以设置 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);