Multifunctional Smooth Scroll In Pure JavaScript – blob-scroll

Preview:

Description:

blob-scroll is a small yet multifunctional JavaScript library which provides smooth, vertical/horizontal ‘Scroll To’ functionality on your web app.

The library smoothly scrolls the page to a specific element or a specific point within the document, with configurable animation speed and easing effect.

How to use it:

Import the blob-scroll.js script into the document.

<script src="js/blob-scroll.js"></script>

Scroll to the top of the webpage. Ideal for the back to top button.

blobScroll.scroll();

Scroll the page to a specific point.

// 300px
blobScroll.scroll(300);

Scroll the page to a specific element.

blobScroll.scroll(document.getElementById('element'));
// or
blobScroll.scroll('#element');

Enable all the anchor links within the document to smoothly scroll the webpage to their corresponding setions.

const links = document.querySelectorAll('a[href^="#"]');
for (let i = 0; i < links.length; ++i) {
    links[i].addEventListener('click', function(e) {
        e.preventDefault();
        blobScroll.scroll(e.target.getAttribute('href'));
    });    
}

Possible options to customize the smooth scroll behavior. You can pass the following options as an object to the scroll function.

blobScroll.scroll(300,{
  // Axis.
  axis: 'y',
  // Animation length in milliseconds.
  duration: 500,
  /*
    If provided, will be added to the scroll target's true
    position. To scroll beyond a target — to e.g. account
    for a sticky header — supply a negative number; to under-
    scroll, provide a positive one.
  */
  offset: 0,
  // The parent. Default is the window.
  parent: document.documentElement,
  /*
    linear
    ease
    easeInQuad
    easeOutQuad
    easeInOutQuad
    easeInCubic
    easeOutCubic
    easeInOutCubic
    easeInQuart
    easeOutQuart
    easeInOutQuart
    easeInQuint
    easeOutQuint
    easeInOutQuint
  */
  transition: 'ease',
  // Optional callback to execute when finished.
  callback: null
});

Changelog:

09/05/2018

• more edge/ie workarounds

09/02/2018

• element scroll fix for Edge