Modern Performant Smooth Scroll Library – Jump.js

Category: Animation , Javascript | December 14, 2019
Author:callmecavs
Views Total:1,910 views
Official Page:Go to website
Last Update:December 14, 2019
License:MIT

Preview:

Modern Performant Smooth Scroll Library – Jump.js

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

 

You Might Be Interested In:


Leave a Reply