Modern Performant Smooth Scroll Library – Jump.js

Preview:

Description:

Jump.js is a modern, performant and customizable smooth scroll library written in pure JavaScript (ES6).

The library enables the page to smooth scroll to a specific position with configurable offset, duration, easing using requestAnimationFrame API.

Note:

If you’d like to implement the native smooth scroll behavior on your webpage, use the following CSS snippets.

.container {
  scroll-behavior: smooth;
}

How to use it:

1. Install and import the Jump.js library.

# NPM
$ npm install jump.js --save

// ES 6
import Jump from 'jump.js'

<!-- Or from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/jump.js/dist/jump.min.js"></script>

2. Scroll the page to a specific element within the document.

// scroll to the top
Jump('.narbar');

3. Scroll the page to a specific point.

// scroll down 200px
Jump(100);
// scroll up 200px
Jump(-200);

4. Config the smooth scroll behavior with the following options.

Jump(element,{
  // duration in milliseconds
  duration: 1000,
  // offset in pixels
  offset: 0,
  // fired after scroll
  callback: null,
  
  // easing function
  easing: 'easeInOutQuad',
  // enable accessibility
  a11y: false
  
});