Guess what adding the smooth scrolling functionality is one thing that we all developers encounter at least once in our journey. The big question is which one to choice for our project. It’s depends on your needs if you just need smooth scrolling then choosing the lightest one is the best solution. In this article we will gonna learn how to jump library for smooth scrolling.

Why Jump ?

Jump was developed keeping modern JavaScript flow in mind. It doesn’t depends on any dependency. When you will gonna see it’s size you will be amazed.

Guess what its only 670 byte in size. Yes you have read correct 670 byte only. Supports most of the browsers.

Consequently, it supports the following natively:

  • Chrome 24+
  • Firefox 23+
  • Safari 6.1+
  • Opera 15+
  • IE 10+
  • iOS Safari 7.1+
  • Android Browser 4.4+

Installation and Usage

One thing most of the developers don’t understand is the developer experience while using a library. In other words a library should do his job in minimum number of lines. No one like to add initialise code or any other random code.

With the jump.js you don’t need to initialise anything. Just import and use.

You can install it from npm.

npm install jump.js --save

Then simply import it.

import jump from 'jump.js'

To use it simply pass element id or classname.

jump('.target')

That’s it in just a single line of code we have accomplished our motive.

What about the customisation ?

You have access to plenty of options for customization.

jump('.target', {
  duration: 1000,
  offset: 0,
  callback: undefined,
  easing: easeInOutQuad,
  a11y: false
})

I hope you have enjoyed this article. Feel free to write your valuable comments.

Full docs.

How to create scroll indicator with React

Categories: JavaScript

3 Comments

How to use Choices.js with React for multi select input - Blog React · October 1, 2020 at 3:34 am

[…] Jump.js a modern smooth scrolling library […]

How to make wiggly div in React - Blog React · October 1, 2020 at 3:34 am

[…] Jump.js a modern smooth scrolling library Categories: Reactjs Tags: Reactjs Advanced […]

How to use Scroll Animation Library (SAL) with React - Blog React · October 7, 2020 at 3:24 am

[…] Jump.js a modern smooth scrolling library […]

Comments are closed.