Question

好的，我正在设计我公司的新网站。我在页面顶部有一个固定导航，其中的链接使用jQuery滚动到网页的所需部分。我的问题是，当您将浏览器的大小调整为iPhone / Smartphone大小时，滚动的脚本将无效。我无法判断我使用的WordPress主题是否导致冲突或CSS是否在干扰。我已经在控制台中测试了脚本调用函数，但它可以工作，但页面不会滚动到这些部分。

该网站为www.conceptwebsolutions.com＆lt;我知道具有讽刺意味。

这是我用来调用滚动脚本的代码。

jQuery('li.menu-item a').click(function (e) {
    event.preventDefault();

    jQuery('li.current_page_item').removeClass('current_page_item');
    jQuery(this).parent().addClass('current_page_item');

    console.log('clicked ' + this);
    console.log('clicked ' + e.currentTarget.hash);
    var target = e.currentTarget.hash;
    jQuery(target).ScrollTo({
        duration: 1000,
        easing: 'swing'
    });
});

这是滚动脚本

 /*
     * @depends jquery
     * @name jquery.scrollto
     * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}
     */

/**
 * jQuery Aliaser
 */
(function(window,undefined){
    // Prepare
    var jQuery, $, ScrollTo;
    jQuery = $ = window.jQuery;

    /**
 * jQuery ScrollTo (balupton edition)
 * @version 1.2.0
 * @date July 9, 2012
 * @since 0.1.0, August 27, 2010
 * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}
 * @author Benjamin "balupton" Lupton {@link http://balupton.com}
 * @copyright (c) 2010 Benjamin Arthur Lupton {@link http://balupton.com}
 * @license MIT License {@link http://creativecommons.org/licenses/MIT/}
 */
ScrollTo = $.ScrollTo = $.ScrollTo || {
    /**
     * The Default Configuration
     */
    config: {
        duration: 400,
        easing: 'swing',
        callback: undefined,
        durationMode: 'each',
        offsetTop: 0,
        offsetLeft: 0
    },

    /**
     * Configure ScrollTo
     */
    configure: function(options){
        // Apply Options to Config
        $.extend(ScrollTo.config, options||{});

        // Chain
        return this;
    },

    /**
     * Perform the Scroll Animation for the Collections
     * We use $inline here, so we can determine the actual offset start for each overflow:scroll item
     * Each collection is for each overflow:scroll item
     */
    scroll: function(collections, config){
        // Prepare
        var collection, $container, container, $target, $inline, position,
            containerScrollTop, containerScrollLeft,
            containerScrollTopEnd, containerScrollLeftEnd,
            startOffsetTop, targetOffsetTop, targetOffsetTopAdjusted,
            startOffsetLeft, targetOffsetLeft, targetOffsetLeftAdjusted,
            scrollOptions,
            callback;

        // Determine the Scroll
        collection = collections.pop();
        $container = collection.$container;
        container = $container.get(0);
        $target = collection.$target;

        // Prepare the Inline Element of the Container
        $inline = $('<span/>').css({
            'position': 'absolute',
            'top': '0px',
            'left': '0px'
        });
        position = $container.css('position');

        // Insert the Inline Element of the Container
        $container.css('position','relative');
        $inline.appendTo($container);

        // Determine the top offset
        startOffsetTop = $inline.offset().top;
        targetOffsetTop = $target.offset().top;
        targetOffsetTopAdjusted = targetOffsetTop - startOffsetTop - parseInt(config.offsetTop,10);

        // Determine the left offset
        startOffsetLeft = $inline.offset().left;
        targetOffsetLeft = $target.offset().left;
        targetOffsetLeftAdjusted = targetOffsetLeft - startOffsetLeft - parseInt(config.offsetLeft,10);

        // Determine current scroll positions
        containerScrollTop = container.scrollTop;
        containerScrollLeft = container.scrollLeft;

        // Reset the Inline Element of the Container
        $inline.remove();
        $container.css('position',position);

        // Prepare the scroll options
        scrollOptions = {};

        // Prepare the callback
        callback = function(event){
            // Check
            if ( collections.length === 0 ) {
                // Callback
                if ( typeof config.callback === 'function' ) {
                    config.callback.apply(this,[event]);
                }
            }
            else {
                // Recurse
                ScrollTo.scroll(collections,config);
            }
            // Return true
            return true;
        };

        // Handle if we only want to scroll if we are outside the viewport
        if ( config.onlyIfOutside ) {
            // Determine current scroll positions
            containerScrollTopEnd = containerScrollTop + $container.height();
            containerScrollLeftEnd = containerScrollLeft + $container.width();

            // Check if we are in the range of the visible area of the container
            if ( containerScrollTop < targetOffsetTopAdjusted && targetOffsetTopAdjusted < containerScrollTopEnd ) {
                targetOffsetTopAdjusted = containerScrollTop;
            }
            if ( containerScrollLeft < targetOffsetLeftAdjusted && targetOffsetLeftAdjusted < containerScrollLeftEnd ) {
                targetOffsetLeftAdjusted = containerScrollLeft;
            }
        }

        // Determine the scroll options
        if ( targetOffsetTopAdjusted !== containerScrollTop ) {
            scrollOptions.scrollTop = targetOffsetTopAdjusted;
        }
        if ( targetOffsetLeftAdjusted !== containerScrollLeft ) {
            scrollOptions.scrollLeft = targetOffsetLeftAdjusted;
        }

        // Perform the scroll
        if ( $.browser.safari && container === document.body ) {
            window.scrollTo(scrollOptions.scrollLeft, scrollOptions.scrollTop);
            callback();
        }
        else if ( scrollOptions.scrollTop || scrollOptions.scrollLeft ) {
            $container.animate(scrollOptions, config.duration, config.easing, callback);
        }
        else {
            callback();
        }

        // Return true
        return true;
    },

    /**
     * ScrollTo the Element using the Options
     */
    fn: function(options){
        // Prepare
        var collections, config, $container, container;
        collections = [];

        // Prepare
        var $target = $(this);
        if ( $target.length === 0 ) {
            // Chain
            return this;
        }

        // Handle Options
        config = $.extend({},ScrollTo.config,options);

        // Fetch
        $container = $target.parent();
        container = $container.get(0);

        // Cycle through the containers
        while ( ($container.length === 1) && (container !== document.body) && (container !== document) ) {
            // Check Container for scroll differences
            var scrollTop, scrollLeft;
            scrollTop = $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight;
            scrollLeft =  $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth;
            if ( scrollTop || scrollLeft ) {
                // Push the Collection
                collections.push({
                    '$container': $container,
                    '$target': $target
                });
                // Update the Target
                $target = $container;
            }
            // Update the Container
            $container = $container.parent();
            container = $container.get(0);
        }

        // Add the final collection
        collections.push({
            '$container': $(
                ($.browser.msie || $.browser.mozilla) ? 'html' : 'body'
            ),
            '$target': $target
        });

        // Adjust the Config
        if ( config.durationMode === 'all' ) {
            config.duration /= collections.length;
        }

        // Handle
        ScrollTo.scroll(collections,config);

        // Chain
        return this;
    }
};

// Apply our jQuery Prototype Function
$.fn.ScrollTo = $.ScrollTo.fn;

})(window);

Answer 1

你的jquery中有错误

jQuery('li.menu-item a').click(function (e) {
    e.preventDefault();

    jQuery('li.current_page_item').removeClass('current_page_item');
    jQuery(this).parent().addClass('current_page_item');

    console.log('clicked ' + this);
    console.log('clicked ' + e.currentTarget.hash);
    var target = e.currentTarget.hash;
    jQuery(target).ScrollTo({
        duration: 1000,
        easing: 'swing'
    });
});

您也可以将其重写为

$('li.menu-item a').click(function (e) {
    e.preventDefault();

    $('li.current_page_item').removeClass('current_page_item');
    $(this).parent().addClass('current_page_item');

    console.log('clicked ' + this);
    console.log('clicked ' + e.currentTarget.hash);

    $(e.currentTarget.hash).ScrollTo({
        duration: 1000,
        easing: 'swing'
    });
});

Scrollto脚本不适用于响应式网站

1 个答案: