smooth-scroll js not scrolling

Question

I am having some trouble integrating the smooth-scroll JS into a simple webpage, http://www.asiweb.com/iPad/demo/index.html

What troubles me is I have it working on a different site perfectly, using the exact same code. I brought over the same files and copied in the code but instead of scrolling it just snaps to the anchor links. I know the person who created the original file has since updated it and I tried using the updates in various forms but without success. I wondered if something was getting in the way of the script so I removed and put back in different pieces of the code without success either. Any suggestions you have would be great!

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>

Answer 1

looks like you're trying to run smoothscroll before you link to the actuall smoothscroll script.

try the other way around

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

Answer 2

For anyone else interested, I was not able to get the code I had working to work again, but I was able to find a different solution using this bit from 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;
  }
}
});
});