[d3cf3a1] | 1 | /*! SmoothScroll v16.1.4 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */
|
---|
| 2 | (function (global, factory) {
|
---|
| 3 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
---|
| 4 | typeof define === 'function' && define.amd ? define(factory) :
|
---|
| 5 | (global = global || self, global.SmoothScroll = factory());
|
---|
| 6 | }(this, (function () { 'use strict';
|
---|
| 7 |
|
---|
| 8 | //
|
---|
| 9 | // Default settings
|
---|
| 10 | //
|
---|
| 11 |
|
---|
| 12 | var defaults = {
|
---|
| 13 |
|
---|
| 14 | // Selectors
|
---|
| 15 | ignore: '[data-scroll-ignore]',
|
---|
| 16 | header: null,
|
---|
| 17 | topOnEmptyHash: true,
|
---|
| 18 |
|
---|
| 19 | // Speed & Duration
|
---|
| 20 | speed: 500,
|
---|
| 21 | speedAsDuration: false,
|
---|
| 22 | durationMax: null,
|
---|
| 23 | durationMin: null,
|
---|
| 24 | clip: true,
|
---|
| 25 | offset: 0,
|
---|
| 26 |
|
---|
| 27 | // Easing
|
---|
| 28 | easing: 'easeInOutCubic',
|
---|
| 29 | customEasing: null,
|
---|
| 30 |
|
---|
| 31 | // History
|
---|
| 32 | updateURL: true,
|
---|
| 33 | popstate: true,
|
---|
| 34 |
|
---|
| 35 | // Custom Events
|
---|
| 36 | emitEvents: true
|
---|
| 37 |
|
---|
| 38 | };
|
---|
| 39 |
|
---|
| 40 |
|
---|
| 41 | //
|
---|
| 42 | // Utility Methods
|
---|
| 43 | //
|
---|
| 44 |
|
---|
| 45 | /**
|
---|
| 46 | * Check if browser supports required methods
|
---|
| 47 | * @return {Boolean} Returns true if all required methods are supported
|
---|
| 48 | */
|
---|
| 49 | var supports = function () {
|
---|
| 50 | return (
|
---|
| 51 | 'querySelector' in document &&
|
---|
| 52 | 'addEventListener' in window &&
|
---|
| 53 | 'requestAnimationFrame' in window &&
|
---|
| 54 | 'closest' in window.Element.prototype
|
---|
| 55 | );
|
---|
| 56 | };
|
---|
| 57 |
|
---|
| 58 | /**
|
---|
| 59 | * Merge two or more objects together.
|
---|
| 60 | * @param {Object} objects The objects to merge together
|
---|
| 61 | * @returns {Object} Merged values of defaults and options
|
---|
| 62 | */
|
---|
| 63 | var extend = function () {
|
---|
| 64 | var merged = {};
|
---|
| 65 | Array.prototype.forEach.call(arguments, function (obj) {
|
---|
| 66 | for (var key in obj) {
|
---|
| 67 | if (!obj.hasOwnProperty(key)) return;
|
---|
| 68 | merged[key] = obj[key];
|
---|
| 69 | }
|
---|
| 70 | });
|
---|
| 71 | return merged;
|
---|
| 72 | };
|
---|
| 73 |
|
---|
| 74 | /**
|
---|
| 75 | * Check to see if user prefers reduced motion
|
---|
| 76 | * @param {Object} settings Script settings
|
---|
| 77 | */
|
---|
| 78 | var reduceMotion = function () {
|
---|
| 79 | if ('matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches) {
|
---|
| 80 | return true;
|
---|
| 81 | }
|
---|
| 82 | return false;
|
---|
| 83 | };
|
---|
| 84 |
|
---|
| 85 | /**
|
---|
| 86 | * Get the height of an element.
|
---|
| 87 | * @param {Node} elem The element to get the height of
|
---|
| 88 | * @return {Number} The element's height in pixels
|
---|
| 89 | */
|
---|
| 90 | var getHeight = function (elem) {
|
---|
| 91 | return parseInt(window.getComputedStyle(elem).height, 10);
|
---|
| 92 | };
|
---|
| 93 |
|
---|
| 94 | /**
|
---|
| 95 | * Escape special characters for use with querySelector
|
---|
| 96 | * @author Mathias Bynens
|
---|
| 97 | * @link https://github.com/mathiasbynens/CSS.escape
|
---|
| 98 | * @param {String} id The anchor ID to escape
|
---|
| 99 | */
|
---|
| 100 | var escapeCharacters = function (id) {
|
---|
| 101 |
|
---|
| 102 | // Remove leading hash
|
---|
| 103 | if (id.charAt(0) === '#') {
|
---|
| 104 | id = id.substr(1);
|
---|
| 105 | }
|
---|
| 106 |
|
---|
| 107 | var string = String(id);
|
---|
| 108 | var length = string.length;
|
---|
| 109 | var index = -1;
|
---|
| 110 | var codeUnit;
|
---|
| 111 | var result = '';
|
---|
| 112 | var firstCodeUnit = string.charCodeAt(0);
|
---|
| 113 | while (++index < length) {
|
---|
| 114 | codeUnit = string.charCodeAt(index);
|
---|
| 115 | // Note: there’s no need to special-case astral symbols, surrogate
|
---|
| 116 | // pairs, or lone surrogates.
|
---|
| 117 |
|
---|
| 118 | // If the character is NULL (U+0000), then throw an
|
---|
| 119 | // `InvalidCharacterError` exception and terminate these steps.
|
---|
| 120 | if (codeUnit === 0x0000) {
|
---|
| 121 | throw new InvalidCharacterError(
|
---|
| 122 | 'Invalid character: the input contains U+0000.'
|
---|
| 123 | );
|
---|
| 124 | }
|
---|
| 125 |
|
---|
| 126 | if (
|
---|
| 127 | // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
|
---|
| 128 | // U+007F, […]
|
---|
| 129 | (codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
|
---|
| 130 | // If the character is the first character and is in the range [0-9]
|
---|
| 131 | // (U+0030 to U+0039), […]
|
---|
| 132 | (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
|
---|
| 133 | // If the character is the second character and is in the range [0-9]
|
---|
| 134 | // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
|
---|
| 135 | (
|
---|
| 136 | index === 1 &&
|
---|
| 137 | codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
|
---|
| 138 | firstCodeUnit === 0x002D
|
---|
| 139 | )
|
---|
| 140 | ) {
|
---|
| 141 | // http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
|
---|
| 142 | result += '\\' + codeUnit.toString(16) + ' ';
|
---|
| 143 | continue;
|
---|
| 144 | }
|
---|
| 145 |
|
---|
| 146 | // If the character is not handled by one of the above rules and is
|
---|
| 147 | // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
|
---|
| 148 | // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
|
---|
| 149 | // U+005A), or [a-z] (U+0061 to U+007A), […]
|
---|
| 150 | if (
|
---|
| 151 | codeUnit >= 0x0080 ||
|
---|
| 152 | codeUnit === 0x002D ||
|
---|
| 153 | codeUnit === 0x005F ||
|
---|
| 154 | codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
|
---|
| 155 | codeUnit >= 0x0041 && codeUnit <= 0x005A ||
|
---|
| 156 | codeUnit >= 0x0061 && codeUnit <= 0x007A
|
---|
| 157 | ) {
|
---|
| 158 | // the character itself
|
---|
| 159 | result += string.charAt(index);
|
---|
| 160 | continue;
|
---|
| 161 | }
|
---|
| 162 |
|
---|
| 163 | // Otherwise, the escaped character.
|
---|
| 164 | // http://dev.w3.org/csswg/cssom/#escape-a-character
|
---|
| 165 | result += '\\' + string.charAt(index);
|
---|
| 166 |
|
---|
| 167 | }
|
---|
| 168 |
|
---|
| 169 | // Return sanitized hash
|
---|
| 170 | return '#' + result;
|
---|
| 171 |
|
---|
| 172 | };
|
---|
| 173 |
|
---|
| 174 | /**
|
---|
| 175 | * Calculate the easing pattern
|
---|
| 176 | * @link https://gist.github.com/gre/1650294
|
---|
| 177 | * @param {Object} settings Easing pattern
|
---|
| 178 | * @param {Number} time Time animation should take to complete
|
---|
| 179 | * @returns {Number}
|
---|
| 180 | */
|
---|
| 181 | var easingPattern = function (settings, time) {
|
---|
| 182 | var pattern;
|
---|
| 183 |
|
---|
| 184 | // Default Easing Patterns
|
---|
| 185 | if (settings.easing === 'easeInQuad') pattern = time * time; // accelerating from zero velocity
|
---|
| 186 | if (settings.easing === 'easeOutQuad') pattern = time * (2 - time); // decelerating to zero velocity
|
---|
| 187 | if (settings.easing === 'easeInOutQuad') pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
|
---|
| 188 | if (settings.easing === 'easeInCubic') pattern = time * time * time; // accelerating from zero velocity
|
---|
| 189 | if (settings.easing === 'easeOutCubic') pattern = (--time) * time * time + 1; // decelerating to zero velocity
|
---|
| 190 | if (settings.easing === 'easeInOutCubic') pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
|
---|
| 191 | if (settings.easing === 'easeInQuart') pattern = time * time * time * time; // accelerating from zero velocity
|
---|
| 192 | if (settings.easing === 'easeOutQuart') pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
|
---|
| 193 | if (settings.easing === 'easeInOutQuart') pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
|
---|
| 194 | if (settings.easing === 'easeInQuint') pattern = time * time * time * time * time; // accelerating from zero velocity
|
---|
| 195 | if (settings.easing === 'easeOutQuint') pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
|
---|
| 196 | if (settings.easing === 'easeInOutQuint') pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
|
---|
| 197 |
|
---|
| 198 | // Custom Easing Patterns
|
---|
| 199 | if (!!settings.customEasing) pattern = settings.customEasing(time);
|
---|
| 200 |
|
---|
| 201 | return pattern || time; // no easing, no acceleration
|
---|
| 202 | };
|
---|
| 203 |
|
---|
| 204 | /**
|
---|
| 205 | * Determine the document's height
|
---|
| 206 | * @returns {Number}
|
---|
| 207 | */
|
---|
| 208 | var getDocumentHeight = function () {
|
---|
| 209 | return Math.max(
|
---|
| 210 | document.body.scrollHeight, document.documentElement.scrollHeight,
|
---|
| 211 | document.body.offsetHeight, document.documentElement.offsetHeight,
|
---|
| 212 | document.body.clientHeight, document.documentElement.clientHeight
|
---|
| 213 | );
|
---|
| 214 | };
|
---|
| 215 |
|
---|
| 216 | /**
|
---|
| 217 | * Calculate how far to scroll
|
---|
| 218 | * Clip support added by robjtede - https://github.com/cferdinandi/smooth-scroll/issues/405
|
---|
| 219 | * @param {Element} anchor The anchor element to scroll to
|
---|
| 220 | * @param {Number} headerHeight Height of a fixed header, if any
|
---|
| 221 | * @param {Number} offset Number of pixels by which to offset scroll
|
---|
| 222 | * @param {Boolean} clip If true, adjust scroll distance to prevent abrupt stops near the bottom of the page
|
---|
| 223 | * @returns {Number}
|
---|
| 224 | */
|
---|
| 225 | var getEndLocation = function (anchor, headerHeight, offset, clip) {
|
---|
| 226 | var location = 0;
|
---|
| 227 | if (anchor.offsetParent) {
|
---|
| 228 | do {
|
---|
| 229 | location += anchor.offsetTop;
|
---|
| 230 | anchor = anchor.offsetParent;
|
---|
| 231 | } while (anchor);
|
---|
| 232 | }
|
---|
| 233 | location = Math.max(location - headerHeight - offset, 0);
|
---|
| 234 | if (clip) {
|
---|
| 235 | location = Math.min(location, getDocumentHeight() - window.innerHeight);
|
---|
| 236 | }
|
---|
| 237 | return location;
|
---|
| 238 | };
|
---|
| 239 |
|
---|
| 240 | /**
|
---|
| 241 | * Get the height of the fixed header
|
---|
| 242 | * @param {Node} header The header
|
---|
| 243 | * @return {Number} The height of the header
|
---|
| 244 | */
|
---|
| 245 | var getHeaderHeight = function (header) {
|
---|
| 246 | return !header ? 0 : (getHeight(header) + header.offsetTop);
|
---|
| 247 | };
|
---|
| 248 |
|
---|
| 249 | /**
|
---|
| 250 | * Calculate the speed to use for the animation
|
---|
| 251 | * @param {Number} distance The distance to travel
|
---|
| 252 | * @param {Object} settings The plugin settings
|
---|
| 253 | * @return {Number} How fast to animate
|
---|
| 254 | */
|
---|
| 255 | var getSpeed = function (distance, settings) {
|
---|
| 256 | var speed = settings.speedAsDuration ? settings.speed : Math.abs(distance / 1000 * settings.speed);
|
---|
| 257 | if (settings.durationMax && speed > settings.durationMax) return settings.durationMax;
|
---|
| 258 | if (settings.durationMin && speed < settings.durationMin) return settings.durationMin;
|
---|
| 259 | return parseInt(speed, 10);
|
---|
| 260 | };
|
---|
| 261 |
|
---|
| 262 | var setHistory = function (options) {
|
---|
| 263 |
|
---|
| 264 | // Make sure this should run
|
---|
| 265 | if (!history.replaceState || !options.updateURL || history.state) return;
|
---|
| 266 |
|
---|
| 267 | // Get the hash to use
|
---|
| 268 | var hash = window.location.hash;
|
---|
| 269 | hash = hash ? hash : '';
|
---|
| 270 |
|
---|
| 271 | // Set a default history
|
---|
| 272 | history.replaceState(
|
---|
| 273 | {
|
---|
| 274 | smoothScroll: JSON.stringify(options),
|
---|
| 275 | anchor: hash ? hash : window.pageYOffset
|
---|
| 276 | },
|
---|
| 277 | document.title,
|
---|
| 278 | hash ? hash : window.location.href
|
---|
| 279 | );
|
---|
| 280 |
|
---|
| 281 | };
|
---|
| 282 |
|
---|
| 283 | /**
|
---|
| 284 | * Update the URL
|
---|
| 285 | * @param {Node} anchor The anchor that was scrolled to
|
---|
| 286 | * @param {Boolean} isNum If true, anchor is a number
|
---|
| 287 | * @param {Object} options Settings for Smooth Scroll
|
---|
| 288 | */
|
---|
| 289 | var updateURL = function (anchor, isNum, options) {
|
---|
| 290 |
|
---|
| 291 | // Bail if the anchor is a number
|
---|
| 292 | if (isNum) return;
|
---|
| 293 |
|
---|
| 294 | // Verify that pushState is supported and the updateURL option is enabled
|
---|
| 295 | if (!history.pushState || !options.updateURL) return;
|
---|
| 296 |
|
---|
| 297 | // Update URL
|
---|
| 298 | history.pushState(
|
---|
| 299 | {
|
---|
| 300 | smoothScroll: JSON.stringify(options),
|
---|
| 301 | anchor: anchor.id
|
---|
| 302 | },
|
---|
| 303 | document.title,
|
---|
| 304 | anchor === document.documentElement ? '#top' : '#' + anchor.id
|
---|
| 305 | );
|
---|
| 306 |
|
---|
| 307 | };
|
---|
| 308 |
|
---|
| 309 | /**
|
---|
| 310 | * Bring the anchored element into focus
|
---|
| 311 | * @param {Node} anchor The anchor element
|
---|
| 312 | * @param {Number} endLocation The end location to scroll to
|
---|
| 313 | * @param {Boolean} isNum If true, scroll is to a position rather than an element
|
---|
| 314 | */
|
---|
| 315 | var adjustFocus = function (anchor, endLocation, isNum) {
|
---|
| 316 |
|
---|
| 317 | // Is scrolling to top of page, blur
|
---|
| 318 | if (anchor === 0) {
|
---|
| 319 | document.body.focus();
|
---|
| 320 | }
|
---|
| 321 |
|
---|
| 322 | // Don't run if scrolling to a number on the page
|
---|
| 323 | if (isNum) return;
|
---|
| 324 |
|
---|
| 325 | // Otherwise, bring anchor element into focus
|
---|
| 326 | anchor.focus();
|
---|
| 327 | if (document.activeElement !== anchor) {
|
---|
| 328 | anchor.setAttribute('tabindex', '-1');
|
---|
| 329 | anchor.focus();
|
---|
| 330 | anchor.style.outline = 'none';
|
---|
| 331 | }
|
---|
| 332 | window.scrollTo(0 , endLocation);
|
---|
| 333 |
|
---|
| 334 | };
|
---|
| 335 |
|
---|
| 336 | /**
|
---|
| 337 | * Emit a custom event
|
---|
| 338 | * @param {String} type The event type
|
---|
| 339 | * @param {Object} options The settings object
|
---|
| 340 | * @param {Node} anchor The anchor element
|
---|
| 341 | * @param {Node} toggle The toggle element
|
---|
| 342 | */
|
---|
| 343 | var emitEvent = function (type, options, anchor, toggle) {
|
---|
| 344 | if (!options.emitEvents || typeof window.CustomEvent !== 'function') return;
|
---|
| 345 | var event = new CustomEvent(type, {
|
---|
| 346 | bubbles: true,
|
---|
| 347 | detail: {
|
---|
| 348 | anchor: anchor,
|
---|
| 349 | toggle: toggle
|
---|
| 350 | }
|
---|
| 351 | });
|
---|
| 352 | document.dispatchEvent(event);
|
---|
| 353 | };
|
---|
| 354 |
|
---|
| 355 |
|
---|
| 356 | //
|
---|
| 357 | // SmoothScroll Constructor
|
---|
| 358 | //
|
---|
| 359 |
|
---|
| 360 | var SmoothScroll = function (selector, options) {
|
---|
| 361 |
|
---|
| 362 | //
|
---|
| 363 | // Variables
|
---|
| 364 | //
|
---|
| 365 |
|
---|
| 366 | var smoothScroll = {}; // Object for public APIs
|
---|
| 367 | var settings, toggle, fixedHeader, animationInterval;
|
---|
| 368 |
|
---|
| 369 |
|
---|
| 370 | //
|
---|
| 371 | // Methods
|
---|
| 372 | //
|
---|
| 373 |
|
---|
| 374 | /**
|
---|
| 375 | * Cancel a scroll-in-progress
|
---|
| 376 | */
|
---|
| 377 | smoothScroll.cancelScroll = function (noEvent) {
|
---|
| 378 | cancelAnimationFrame(animationInterval);
|
---|
| 379 | animationInterval = null;
|
---|
| 380 | if (noEvent) return;
|
---|
| 381 | emitEvent('scrollCancel', settings);
|
---|
| 382 | };
|
---|
| 383 |
|
---|
| 384 | /**
|
---|
| 385 | * Start/stop the scrolling animation
|
---|
| 386 | * @param {Node|Number} anchor The element or position to scroll to
|
---|
| 387 | * @param {Element} toggle The element that toggled the scroll event
|
---|
| 388 | * @param {Object} options
|
---|
| 389 | */
|
---|
| 390 | smoothScroll.animateScroll = function (anchor, toggle, options) {
|
---|
| 391 |
|
---|
| 392 | // Cancel any in progress scrolls
|
---|
| 393 | smoothScroll.cancelScroll();
|
---|
| 394 |
|
---|
| 395 | // Local settings
|
---|
| 396 | var _settings = extend(settings || defaults, options || {}); // Merge user options with defaults
|
---|
| 397 |
|
---|
| 398 | // Selectors and variables
|
---|
| 399 | var isNum = Object.prototype.toString.call(anchor) === '[object Number]' ? true : false;
|
---|
| 400 | var anchorElem = isNum || !anchor.tagName ? null : anchor;
|
---|
| 401 | if (!isNum && !anchorElem) return;
|
---|
| 402 | var startLocation = window.pageYOffset; // Current location on the page
|
---|
| 403 | if (_settings.header && !fixedHeader) {
|
---|
| 404 | // Get the fixed header if not already set
|
---|
| 405 | fixedHeader = document.querySelector(_settings.header);
|
---|
| 406 | }
|
---|
| 407 | var headerHeight = getHeaderHeight(fixedHeader);
|
---|
| 408 | var endLocation = isNum ? anchor : getEndLocation(anchorElem, headerHeight, parseInt((typeof _settings.offset === 'function' ? _settings.offset(anchor, toggle) : _settings.offset), 10), _settings.clip); // Location to scroll to
|
---|
| 409 | var distance = endLocation - startLocation; // distance to travel
|
---|
| 410 | var documentHeight = getDocumentHeight();
|
---|
| 411 | var timeLapsed = 0;
|
---|
| 412 | var speed = getSpeed(distance, _settings);
|
---|
| 413 | var start, percentage, position;
|
---|
| 414 |
|
---|
| 415 | /**
|
---|
| 416 | * Stop the scroll animation when it reaches its target (or the bottom/top of page)
|
---|
| 417 | * @param {Number} position Current position on the page
|
---|
| 418 | * @param {Number} endLocation Scroll to location
|
---|
| 419 | * @param {Number} animationInterval How much to scroll on this loop
|
---|
| 420 | */
|
---|
| 421 | var stopAnimateScroll = function (position, endLocation) {
|
---|
| 422 |
|
---|
| 423 | // Get the current location
|
---|
| 424 | var currentLocation = window.pageYOffset;
|
---|
| 425 |
|
---|
| 426 | // Check if the end location has been reached yet (or we've hit the end of the document)
|
---|
| 427 | if (position == endLocation || currentLocation == endLocation || ((startLocation < endLocation && window.innerHeight + currentLocation) >= documentHeight)) {
|
---|
| 428 |
|
---|
| 429 | // Clear the animation timer
|
---|
| 430 | smoothScroll.cancelScroll(true);
|
---|
| 431 |
|
---|
| 432 | // Bring the anchored element into focus
|
---|
| 433 | adjustFocus(anchor, endLocation, isNum);
|
---|
| 434 |
|
---|
| 435 | // Emit a custom event
|
---|
| 436 | emitEvent('scrollStop', _settings, anchor, toggle);
|
---|
| 437 |
|
---|
| 438 | // Reset start
|
---|
| 439 | start = null;
|
---|
| 440 | animationInterval = null;
|
---|
| 441 |
|
---|
| 442 | return true;
|
---|
| 443 |
|
---|
| 444 | }
|
---|
| 445 | };
|
---|
| 446 |
|
---|
| 447 | /**
|
---|
| 448 | * Loop scrolling animation
|
---|
| 449 | */
|
---|
| 450 | var loopAnimateScroll = function (timestamp) {
|
---|
| 451 | if (!start) { start = timestamp; }
|
---|
| 452 | timeLapsed += timestamp - start;
|
---|
| 453 | percentage = speed === 0 ? 0 : (timeLapsed / speed);
|
---|
| 454 | percentage = (percentage > 1) ? 1 : percentage;
|
---|
| 455 | position = startLocation + (distance * easingPattern(_settings, percentage));
|
---|
| 456 | window.scrollTo(0, Math.floor(position));
|
---|
| 457 | if (!stopAnimateScroll(position, endLocation)) {
|
---|
| 458 | animationInterval = window.requestAnimationFrame(loopAnimateScroll);
|
---|
| 459 | start = timestamp;
|
---|
| 460 | }
|
---|
| 461 | };
|
---|
| 462 |
|
---|
| 463 | /**
|
---|
| 464 | * Reset position to fix weird iOS bug
|
---|
| 465 | * @link https://github.com/cferdinandi/smooth-scroll/issues/45
|
---|
| 466 | */
|
---|
| 467 | if (window.pageYOffset === 0) {
|
---|
| 468 | window.scrollTo(0, 0);
|
---|
| 469 | }
|
---|
| 470 |
|
---|
| 471 | // Update the URL
|
---|
| 472 | updateURL(anchor, isNum, _settings);
|
---|
| 473 |
|
---|
| 474 | // If the user prefers reduced motion, jump to location
|
---|
| 475 | if (reduceMotion()) {
|
---|
| 476 | adjustFocus(anchor, Math.floor(endLocation), false);
|
---|
| 477 | return;
|
---|
| 478 | }
|
---|
| 479 |
|
---|
| 480 | // Emit a custom event
|
---|
| 481 | emitEvent('scrollStart', _settings, anchor, toggle);
|
---|
| 482 |
|
---|
| 483 | // Start scrolling animation
|
---|
| 484 | smoothScroll.cancelScroll(true);
|
---|
| 485 | window.requestAnimationFrame(loopAnimateScroll);
|
---|
| 486 |
|
---|
| 487 | };
|
---|
| 488 |
|
---|
| 489 | /**
|
---|
| 490 | * If smooth scroll element clicked, animate scroll
|
---|
| 491 | */
|
---|
| 492 | var clickHandler = function (event) {
|
---|
| 493 |
|
---|
| 494 | // Don't run if event was canceled but still bubbled up
|
---|
| 495 | // By @mgreter - https://github.com/cferdinandi/smooth-scroll/pull/462/
|
---|
| 496 | if (event.defaultPrevented) return;
|
---|
| 497 |
|
---|
| 498 | // Don't run if right-click or command/control + click or shift + click
|
---|
| 499 | if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return;
|
---|
| 500 |
|
---|
| 501 | // Check if event.target has closest() method
|
---|
| 502 | // By @totegi - https://github.com/cferdinandi/smooth-scroll/pull/401/
|
---|
| 503 | if (!('closest' in event.target)) return;
|
---|
| 504 |
|
---|
| 505 | // Check if a smooth scroll link was clicked
|
---|
| 506 | toggle = event.target.closest(selector);
|
---|
| 507 | if (!toggle || toggle.tagName.toLowerCase() !== 'a' || event.target.closest(settings.ignore)) return;
|
---|
| 508 |
|
---|
| 509 | // Only run if link is an anchor and points to the current page
|
---|
| 510 | if (toggle.hostname !== window.location.hostname || toggle.pathname !== window.location.pathname || !/#/.test(toggle.href)) return;
|
---|
| 511 |
|
---|
| 512 | // Get an escaped version of the hash
|
---|
| 513 | var hash;
|
---|
| 514 | try {
|
---|
| 515 | hash = escapeCharacters(decodeURIComponent(toggle.hash));
|
---|
| 516 | } catch(e) {
|
---|
| 517 | hash = escapeCharacters(toggle.hash);
|
---|
| 518 | }
|
---|
| 519 |
|
---|
| 520 | // Get the anchored element
|
---|
| 521 | var anchor;
|
---|
| 522 | if (hash === '#') {
|
---|
| 523 | if (!settings.topOnEmptyHash) return;
|
---|
| 524 | anchor = document.documentElement;
|
---|
| 525 | } else {
|
---|
| 526 | anchor = document.querySelector(hash);
|
---|
| 527 | }
|
---|
| 528 | anchor = !anchor && hash === '#top' ? document.documentElement : anchor;
|
---|
| 529 |
|
---|
| 530 | // If anchored element exists, scroll to it
|
---|
| 531 | if (!anchor) return;
|
---|
| 532 | event.preventDefault();
|
---|
| 533 | setHistory(settings);
|
---|
| 534 | smoothScroll.animateScroll(anchor, toggle);
|
---|
| 535 |
|
---|
| 536 | };
|
---|
| 537 |
|
---|
| 538 | /**
|
---|
| 539 | * Animate scroll on popstate events
|
---|
| 540 | */
|
---|
| 541 | var popstateHandler = function () {
|
---|
| 542 |
|
---|
| 543 | // Stop if history.state doesn't exist (ex. if clicking on a broken anchor link).
|
---|
| 544 | // fixes `Cannot read property 'smoothScroll' of null` error getting thrown.
|
---|
| 545 | if (history.state === null) return;
|
---|
| 546 |
|
---|
| 547 | // Only run if state is a popstate record for this instantiation
|
---|
| 548 | if (!history.state.smoothScroll || history.state.smoothScroll !== JSON.stringify(settings)) return;
|
---|
| 549 |
|
---|
| 550 | // Get the anchor
|
---|
| 551 | var anchor = history.state.anchor;
|
---|
| 552 | if (typeof anchor === 'string' && anchor) {
|
---|
| 553 | anchor = document.querySelector(escapeCharacters(history.state.anchor));
|
---|
| 554 | if (!anchor) return;
|
---|
| 555 | }
|
---|
| 556 |
|
---|
| 557 | // Animate scroll to anchor link
|
---|
| 558 | smoothScroll.animateScroll(anchor, null, {updateURL: false});
|
---|
| 559 |
|
---|
| 560 | };
|
---|
| 561 |
|
---|
| 562 | /**
|
---|
| 563 | * Destroy the current initialization.
|
---|
| 564 | */
|
---|
| 565 | smoothScroll.destroy = function () {
|
---|
| 566 |
|
---|
| 567 | // If plugin isn't already initialized, stop
|
---|
| 568 | if (!settings) return;
|
---|
| 569 |
|
---|
| 570 | // Remove event listeners
|
---|
| 571 | document.removeEventListener('click', clickHandler, false);
|
---|
| 572 | window.removeEventListener('popstate', popstateHandler, false);
|
---|
| 573 |
|
---|
| 574 | // Cancel any scrolls-in-progress
|
---|
| 575 | smoothScroll.cancelScroll();
|
---|
| 576 |
|
---|
| 577 | // Reset variables
|
---|
| 578 | settings = null;
|
---|
| 579 | toggle = null;
|
---|
| 580 | fixedHeader = null;
|
---|
| 581 | animationInterval = null;
|
---|
| 582 |
|
---|
| 583 | };
|
---|
| 584 |
|
---|
| 585 | /**
|
---|
| 586 | * Initialize Smooth Scroll
|
---|
| 587 | * @param {Object} options User settings
|
---|
| 588 | */
|
---|
| 589 | var init = function () {
|
---|
| 590 |
|
---|
| 591 | // feature test
|
---|
| 592 | if (!supports()) throw 'Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs.';
|
---|
| 593 |
|
---|
| 594 | // Destroy any existing initializations
|
---|
| 595 | smoothScroll.destroy();
|
---|
| 596 |
|
---|
| 597 | // Selectors and variables
|
---|
| 598 | settings = extend(defaults, options || {}); // Merge user options with defaults
|
---|
| 599 | fixedHeader = settings.header ? document.querySelector(settings.header) : null; // Get the fixed header
|
---|
| 600 |
|
---|
| 601 | // When a toggle is clicked, run the click handler
|
---|
| 602 | document.addEventListener('click', clickHandler, false);
|
---|
| 603 |
|
---|
| 604 | // If updateURL and popState are enabled, listen for pop events
|
---|
| 605 | if (settings.updateURL && settings.popstate) {
|
---|
| 606 | window.addEventListener('popstate', popstateHandler, false);
|
---|
| 607 | }
|
---|
| 608 |
|
---|
| 609 | };
|
---|
| 610 |
|
---|
| 611 |
|
---|
| 612 | //
|
---|
| 613 | // Initialize plugin
|
---|
| 614 | //
|
---|
| 615 |
|
---|
| 616 | init();
|
---|
| 617 |
|
---|
| 618 |
|
---|
| 619 | //
|
---|
| 620 | // Public APIs
|
---|
| 621 | //
|
---|
| 622 |
|
---|
| 623 | return smoothScroll;
|
---|
| 624 |
|
---|
| 625 | };
|
---|
| 626 |
|
---|
| 627 | return SmoothScroll;
|
---|
| 628 |
|
---|
| 629 | })));
|
---|