Smooth Scroll With Easing Functions – smooth-scroll

Category: Animation , Javascript , Recommended | January 8, 2020
Author: cferdinandi
Views Total: 170
Official Page: Go to website
Last Update: January 8, 2020
License: MIT

Preview:

Smooth Scroll With Easing Functions – smooth-scroll

Description:

A lightweight, fast JavaScript library which applies a smooth scroll behavior (with or without easing functions) to anchor links within the document.

Based on closest(), requestAnimationFrame(), and CustomEvent() APIs. To enable the library on legacy browsers. You might need to load the polyfills first.

How to use it:

1. Insert the smooth-scroll.min.js script into the document.

<!-- Without Polyfills -->
<script src="dist/smooth-scroll.min.js"></script>
<!-- Without Polyfills -->
<script src="dist/smooth-scroll.polyfills.min.js"></script>

2. Initialize the library on the exiting anchor links within the document and done.

var scroll = new SmoothScroll('a[href*="#"]');

3. Apply an easing function to the smooth scroll. All available easing functions:

  • Linear
  • easeInQuad
  • easeInCubic
  • easeInQuart
  • easeInQuint
  • easeInOutQuad
  • easeInOutCubic
  • easeInOutQuart
  • easeInOutQuint
  • easeOutQuad
  • easeOutCubic
  • easeOutQuart
  • easeOutQuint
var scroll = new SmoothScroll('a[href*="#"]',{
    easing: 'easeInQuad'
});

4. Or create your own easing function in the customEasing setting.

var scroll = new SmoothScroll('a[href*="#"]',{
    customEasing: function (time) {
      // custom easing function here
    }
});

5. Config the scrolling speed.

var scroll = new SmoothScroll('a[href*="#"]',{
    speed: 500
});

6. Sometimes you might need to ignore anchor links:

<a href="#ignore" data-scroll-ignore>Ignore</a>
var scroll = new SmoothScroll('a[href*="#"]',{
    ignore: '[data-scroll-ignore]'
});

7. Enable/disable browser history and auto-update the URL hash after scrolling. Default: true.

var scroll = new SmoothScroll('a[href*="#"]',{
    updateURL: true,
    popstate: true
});

8. Auto apply an offset to the page in case there is a sticky header in your webpage.

var scroll = new SmoothScroll('a[href*="#"]',{
    header: 'header'
});

9. All default options.

var scroll = new SmoothScroll('a[href*="#"]',{
    // Selectors
    ignore: '[data-scroll-ignore]',
    header: null,
    topOnEmptyHash: true,

    // Speed & Duration
    speed: 500,
    speedAsDuration: false,
    durationMax: null,
    durationMin: null,
    clip: true,
    offset: 0,

    // Easing
    easing: 'easeInOutCubic',
    customEasing: null,

    // History
    updateURL: true,
    popstate: true,

    // Custom Events
    emitEvents: true
});

10. API Methods.

scroll.animateScroll(
  anchor, // Node to scroll to. ex. document.querySelector('#bazinga')
  toggle, // Node that toggles the animation, OR an integer. ex. document.querySelector('#toggle')
  options // Classes and callbacks. Same options as those passed into the init() function.
);

scroll.cancelScroll();

scroll.destroy();

11. Event handlers.

document.addEventListener('scrollStart', logScrollEvent, false);
document.addEventListener('scrollStop', logScrollEvent, false);
document.addEventListener('scrollCancel', logScrollEvent, false);

You Might Be Interested In:


Leave a Reply