平滑滚动js不滚动

smooth-scroll js not scrolling

本文关键字:滚动 js 平滑      更新时间:2024-05-06

我在将平滑滚动JS集成到一个简单的网页中时遇到了一些问题,http://www.asiweb.com/iPad/demo/index.html

让我烦恼的是,我让它在不同的网站上完美地工作,使用完全相同的代码。我带来了相同的文件并复制了代码,但它没有滚动,而是捕捉到锚链接。我知道创建原始文件的人已经更新了它,我尝试以各种形式使用更新,但没有成功。我想知道是不是有什么东西挡住了脚本的去路,所以我删除并放回了不同的代码片段,但也没有成功。你有什么建议都很好!

Smooth Scroll v4.5
Animate scrolling to anchor links, by Chris Ferdinandi.
http://gomakethings.com
Additional contributors:
https://github.com/cferdinandi/smooth-scroll#contributors
Free to use under the MIT License.
http://gomakethings.com/mit/

window.smoothScroll = (function (window, document, undefined) {
'use strict';
// Default settings
// Private {object} variable
var _defaults = {
    speed: 1000,
    easing: 'easeInOutCubic',
    offset: 0,
    updateURL: false,
    callbackBefore: function () {},
    callbackAfter: function () {}
};
// Merge default settings with user options
// Private method
// Returns an {object}
var _mergeObjects = function ( original, updates ) {
    for (var key in updates) {
        original[key] = updates[key];
    }
    return original;
};
// Calculate the easing pattern
// Private method
// Returns a decimal number
var _easingPattern = function ( type, time ) {
    if ( type == 'easeInQuad' ) return time * time; // accelerating from zero velocity
    if ( type == 'easeOutQuad' ) return time * (2 - time); // decelerating to zero velocity
    if ( type == 'easeInOutQuad' ) return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
    if ( type == 'easeInCubic' ) return time * time * time; // accelerating from zero velocity
    if ( type == 'easeOutCubic' ) return (--time) * time * time + 1; // decelerating to zero velocity
    if ( type == 'easeInOutCubic' ) return time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
    if ( type == 'easeInQuart' ) return time * time * time * time; // accelerating from zero velocity
    if ( type == 'easeOutQuart' ) return 1 - (--time) * time * time * time; // decelerating to zero velocity
    if ( type == 'easeInOutQuart' ) return time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
    if ( type == 'easeInQuint' ) return time * time * time * time * time; // accelerating from zero velocity
    if ( type == 'easeOutQuint' ) return 1 + (--time) * time * time * time * time; // decelerating to zero velocity
    if ( type == 'easeInOutQuint' ) return time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
    return time; // no easing, no acceleration
};
// Calculate how far to scroll
// Private method
// Returns an integer
var _getEndLocation = function ( anchor, headerHeight, offset ) {
    var location = 0;
    if (anchor.offsetParent) {
        do {
            location += anchor.offsetTop;
            anchor = anchor.offsetParent;
        } while (anchor);
    }
    location = location - headerHeight - offset;
    if ( location >= 0 ) {
        return location;
    } else {
        return 0;
    }
};
// Determine the document's height
// Private method
// Returns an integer
var _getDocumentHeight = function () {
    return Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
    );
};
// Convert data-options attribute into an object of key/value pairs
// Private method
// Returns an {object}
var _getDataOptions = function ( options ) {
    if ( options === null || options === undefined  ) {
        return {};
    } else {
        var settings = {}; // Create settings object
        options = options.split(';'); // Split into array of options
        // Create a key/value pair for each setting
        options.forEach( function(option) {
            option = option.trim();
            if ( option !== '' ) {
                option = option.split(':');
                settings[option[0]] = option[1].trim();
            }
        });
        return settings;
    }
};
// Update the URL
// Private method
// Runs functions
var _updateURL = function ( anchor, url ) {
    if ( (url === true || url === 'true') && history.pushState ) {
        history.pushState( {pos:anchor.id}, '', anchor );
    }
};
// Start/stop the scrolling animation
// Public method
// Runs functions
var animateScroll = function ( toggle, anchor, options, event ) {
    // Options and overrides
    options = _mergeObjects( _defaults, options || {} ); // Merge user options with defaults
    var overrides = _getDataOptions( toggle ? toggle.getAttribute('data-options') : null );
    var speed = parseInt(overrides.speed || options.speed, 10);
    var easing = overrides.easing || options.easing;
    var offset = parseInt(overrides.offset || options.offset, 10);
    var updateURL = overrides.updateURL || options.updateURL;
    // Selectors and variables
    var fixedHeader = document.querySelector('[data-scroll-header]'); // Get the fixed header
    var headerHeight = fixedHeader === null ? 0 : (fixedHeader.offsetHeight + fixedHeader.offsetTop); // Get the height of a fixed header if one exists
    var startLocation = window.pageYOffset; // Current location on the page
    var endLocation = _getEndLocation( document.querySelector(anchor), headerHeight, offset ); // Scroll to location
    var animationInterval; // interval timer
    var distance = endLocation - startLocation; // distance to travel
    var documentHeight = _getDocumentHeight();
    var timeLapsed = 0;
    var percentage, position;
    // Prevent default click event
    if ( toggle && toggle.tagName === 'A' && event ) {
        event.preventDefault();
    }
    // Update URL
    _updateURL(anchor, updateURL);
    // Stop the scroll animation when it reaches its target (or the bottom/top of page)
    // Private method
    // Runs functions
    var _stopAnimateScroll = function (position, endLocation, animationInterval) {
        var currentLocation = window.pageYOffset;
        if ( position == endLocation || currentLocation == endLocation || ( (window.innerHeight + currentLocation) >= documentHeight ) ) {
            clearInterval(animationInterval);
            options.callbackAfter( toggle, anchor ); // Run callbacks after animation complete
        }
    };
    // Loop scrolling animation
    // Private method
    // Runs functions
    var _loopAnimateScroll = function () {
        timeLapsed += 16;
        percentage = ( timeLapsed / speed );
        percentage = ( percentage > 1 ) ? 1 : percentage;
        position = startLocation + ( distance * _easingPattern(easing, percentage) );
        window.scrollTo( 0, Math.floor(position) );
        _stopAnimateScroll(position, endLocation, animationInterval);
    };
    // Set interval timer
    // Private method
    // Runs functions
    var _startAnimateScroll = function () {
        options.callbackBefore( toggle, anchor ); // Run callbacks before animating scroll
        animationInterval = setInterval(_loopAnimateScroll, 16);
    };
    // Reset position to fix weird iOS bug
    // https://github.com/cferdinandi/smooth-scroll/issues/45
    if ( window.pageYOffset === 0 ) {
        window.scrollTo( 0, 0 );
    }
    // Start scrolling animation
    _startAnimateScroll();
};
// Initialize Smooth Scroll
// Public method
// Runs functions
var init = function ( options ) {
    // Feature test before initializing
    if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
        // Selectors and variables
        options = _mergeObjects( _defaults, options || {} ); // Merge user options with defaults
        var toggles = document.querySelectorAll('[data-scroll]'); // Get smooth scroll toggles
        // When a toggle is clicked, run the click handler
        Array.prototype.forEach.call(toggles, function (toggle, index) {
            toggle.addEventListener('click', animateScroll.bind( null, toggle, toggle.getAttribute('href'), options ), false);
        });
    }
};
// Return public methods
return {
    init: init,
    animateScroll: animateScroll
};
})(window, document);

HTML:

<script src="js/jquery-1.11.1.min.js"></script>
 <script>
smoothScroll.init();
</script>

在链接到实际的smoothwoll脚本之前,似乎正在尝试运行smoothwill。

尝试绕过的另一种方法

<script src="js/jquery-1.11.1.min.js"></script>
<script defer src="../jquery.flexslider.js"></script>
<script src="js/smooth-scroll.js"></script>

<script>
    smoothScroll.init();
</script>

对于其他感兴趣的人来说,我无法让我工作的代码再次工作,但我能够使用css-tricks.com中的这一点找到不同的解决方案:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top
    }, 1000);
    return false;
  }
}
});
});