smooth-scroll js not scrolling

Kristen Vogler

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

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;
  }
}
});
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

JS Smooth scrolling, scroll to bottom of final / bottom div instead of top

From Dev

jquery.smooth-scroll.js Mobile scrolling immediately

From Dev

Smooth Scrolling to anchor with the ability to interrupt animation with scroll?

From Dev

nanoScroller.js with smooth scrolling

From Dev

Offset smooth scroll bootstrap JS

From Dev

JS for smooth scroll to the bottom of the page

From Dev

JS for smooth scroll to the bottom of the page

From Dev

loading data on scroll down not working in IE due to smooth scrolling

From Dev

Issue with Tabs and JS Smooth Scroll (Two Clicks)

From Dev

Smooth scrolling not so smooth

From Dev

Smooth scroll to

From Dev

fullPage.js not scrolling / no scroll possible

From Dev

How to Add Smooth Scrolling Back To Top Button using react js?

From Dev

How to enhance D3.js 'smooth scrolling' demo?

From Dev

Scrolling issue with smooth scrolling javascript

From Dev

UITableView scrolling is not smooth

From Dev

Animated (Smooth) scrolling on ScrollViewer

From Dev

Smooth my scrolling TouchesMoved

From Dev

Smooth scrolling on mouse wheel?

From Dev

Smooth scrolling across browsers?

From Dev

Scrollbar and Smooth Scrolling Code

From Dev

Why is smooth scrolling not working?

From Dev

smooth scrolling div by div

From Dev

Smooth scrolling in javascript?

From Dev

Smooth scrolling down

From Dev

Conflict in Chrome with smooth scrolling

From Dev

Smooth scrolling with Bootstrap scrollspy

From Dev

TabLayout with viewpager not smooth scrolling

From Dev

TabLayout with viewpager not smooth scrolling