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

Smooth scrolling jquery plugin resets scroll start point on refresh. Is there a way to fix this?

本文关键字：滚动 解决 问题 插件 jquery 刷新 平滑 起点      更新时间：2023-09-26

我发现了一个非常易于使用和实现的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

然后点击我的导航条链接，或者如果我在页面下到一半时刷新了，它会重置滚动开始位置，并在你可以滚动到任何位置之前将页面向上推到顶部。我可以用类似currentscrollTop或的东西替换这些.js文件中的一个数字吗？

干杯

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

因此，我建议更改以下行，靠近该函数的顶部：

        var ...
            root = 0,

发件人：

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

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

  • 它捕获了resize事件来设置视图变量，但这是无用的，因为代码的其余部分在使用之前也设置了该变量。

  • 它在scrollSpeed作用域中定义了几个变量，这些变量的作用域更适合mousewheel

  • 它跟踪root变量中的滚动偏移量，也跟踪滚动事件处理程序中的偏移量，但最好在需要时当场请求。这使得滚动事件处理程序变得不必要。

  • 它跟踪滚动变量中是否正在进行滚动动画，但它的值永远不会被读取或暴露。所以我建议删除它。$('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);

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插件现在没有在顶部重置。

相关文章：