javascript - 无法修改滚动速度

标签 javascript jquery html css

<分区>


要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及预期结果。另请参阅:Stack Overflow question checklist

关闭 9 年前

我正在尝试降低我发布的网站的滚动速度:http://www.imbianchinolombardia.it/

JS代码就是这一段,我实在是分不出负责水平滚动速度的那几行代码:

/* Toggle next and previous
================================================== */

jQuery(function( $ ){

    $('div.pane').scrollTo( 0 );

    $.scrollTo( 0 );

    var regions = $('section'),
        active_region = 0, prev, next;

    function setup_region ()
    {
        if ( active_region == 0 )
        {
            $('#toggle .previous a').fadeOut('slow');
            prev = regions.size() - 1;
        }
        else
        {
            $('#toggle .previous a').fadeIn('slow');
            prev = active_region - 1;
        }

        if ( active_region == ( regions.size() - 1 ) )
        {
            $('#toggle .next a').fadeOut('slow');
            next = 0;
        }
        else
        {
            $('#toggle .next a').fadeIn('slow');
            next = active_region+1;
        }

        $('#toggle .previous a').attr('href', '#'+ $(regions).eq(prev).attr('id')).click(function(){ active_region = prev; });
        $('#toggle .next a').attr('href', '#'+ $(regions).eq(next).attr('id')).click(function(){ active_region = next; });
    }
    setup_region();

    $('#toggle a').click(function(){

        // prevent click spam
        if ($('*').is(":animated")) return false;

        $.scrollTo( this.hash, 1500, {center:true});
        setup_region();

        return false;

    });

    // bind left and right arrow keys to navigation
    function leftArrowPressed() { $('#toggle .previous a').click(); }
    function rightArrowPressed() { $('#toggle .next a').click(); }
    document.onkeydown = function(evt) {
        evt = evt || window.event;
        switch (evt.keyCode) {
            case 37:
                leftArrowPressed();
                break;
            case 39:
                rightArrowPressed();
                break;
        }
    };

});




/* Horizontal Scrolling
================================================== */

;(function( $ ){

    var $scrollTo = $.scrollTo = function( target, duration, settings ){
        $(window).scrollTo( target, duration, settings );
    };

    $scrollTo.defaults = {
        axis:'xy',
        duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
    };

    $scrollTo.window = function( scope ){
        return $(window)._scrollable();
    };

    $.fn._scrollable = function(){
        return this.map(function(){
            var elem = this,
                isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;

                if( !isWin )
                    return elem;

            var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;

            return $.browser.safari || doc.compatMode == 'BackCompat' ?
                doc.body :
                doc.documentElement;
        });
    };

    $.fn.scrollTo = function( target, duration, settings ){
        if( typeof duration == 'object' ){
            settings = duration;
            duration = 0;
        }
        if( typeof settings == 'function' )
            settings = { onAfter:settings };

        if( target == 'max' )
            target = 9e9;

        settings = $.extend( {}, $scrollTo.defaults, settings );

        duration = duration || settings.speed || settings.duration;

        settings.queue = settings.queue && settings.axis.length > 1;

        if( settings.queue )

            duration /= 2;
        settings.offset = both( settings.offset );
        settings.over = both( settings.over );

        return this._scrollable().each(function(){
            var elem = this,
                $elem = $(elem),
                targ = target, toff, attr = {},
                win = $elem.is('html,body');

            switch( typeof targ ){

                case 'number':
                case 'string':
                    if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
                        targ = both( targ );
                        break;
                    }

                    targ = $(targ,this);
                case 'object':

                    if( targ.is || targ.style )

                        toff = (targ = $(targ)).offset();
            }
            $.each( settings.axis.split(''), function( i, axis ){
                var Pos = axis == 'x' ? 'Left' : 'Top',
                    pos = Pos.toLowerCase(),
                    key = 'scroll' + Pos,
                    old = elem[key],
                    max = $scrollTo.max(elem, axis);

                if( toff ){
                    attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );

                    if( settings.margin ){
                        attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
                        attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
                    }

                    attr[key] += settings.offset[pos] || 0;

                    if (settings.center) {
                    var dimKey = axis== 'x' ? 'width' : 'height';
                    attr[key] -= ($elem[dimKey]() - targ[dimKey]()) / 2;
                    }

                    if( settings.over[pos] )

                        attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
                }else{
                    var val = targ[pos];

                    attr[key] = val.slice && val.slice(-1) == '%' ?
                        parseFloat(val) / 100 * max
                        : val;
                }

                if( /^\d+$/.test(attr[key]) )

                    attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );

                if( !i && settings.queue ){

                    if( old != attr[key] )

                        animate( settings.onAfterFirst );

                    delete attr[key];
                }
            });

            animate( settings.onAfter );

            function animate( callback ){
                $elem.animate( attr, duration, settings.easing, callback && function(){
                    callback.call(this, target, settings);
                });
            };

        }).end();
    };

    $scrollTo.max = function( elem, axis ){
        var Dim = axis == 'x' ? 'Width' : 'Height',
            scroll = 'scroll'+Dim;

        if( !$(elem).is('html,body') )
            return elem[scroll] - $(elem)[Dim.toLowerCase()]();

        var size = 'client' + Dim,
            html = elem.ownerDocument.documentElement,
            body = elem.ownerDocument.body;

        return Math.max( html[scroll], body[scroll] )
             - Math.min( html[size]  , body[size]   );

    };

    function both( val ){
        return typeof val == 'object' ? val : { top:val, left:val };
    };

})( jQuery );

有没有人能指出正确的行,我该如何继续修改它? 非常感谢

最佳答案

这是怎么回事,你的第三个 anchor 离第二个点比第二个离第一个点远得多。

滚动持续时间设置为 1500(1.5 秒)。

$.scrollTo(this.hash, 1500, {center:true});

因此,这与速度无关,而与持续时间有关。持续时间相同,但距离不同。您可以增加该数字以减慢速度。

关于javascript - 无法修改滚动速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18135351/

上一篇:javascript - 根据用户选择更改 <p> 标签内部分文本的颜色?

下一篇:javascript - LightBox2 隐藏在 HTML iFrame 后面

相关文章:

javascript - Jquery: <a> 链接点击 preventDefault() 不工作?

javascript - 它不适用于 JQuery 的 attr () "onclick"

jquery - 滚动响应 Bootstrap 中的固定 header 损坏?

html - 带有居中图标的 Angular Material mat-nav-list 多行

javascript - Highcharts - 为什么第一列之前和最后一列之后有额外的间距?

javascript - 处理亚像素渲染时,如何让图片或视频填满整个容器?

javascript - 用于切换侧边栏的 Firefox WebExtension 工具栏按钮

jquery - 一页粘性导航不适用于 Google Chrome

javascript - 单击按钮添加 php include

javascript - 循环遍历数组,将每个索引放在新行上,并在警报中显示最终结果