Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Jump.js on NPM Jump.js Downloads on NPM Standard JavaScript Style

A modern smooth scrolling library.


Jump was developed with a modern JavaScript workflow in mind. To use it, it's recommended you have a build system in place that can transpile ES6, and bundle modules. For a minimal boilerplate that fulfills those requirements, check out outset.

Follow these steps to get started:

  1. Install
  2. Import
  3. Call
  4. Review Options


Using NPM, install Jump, and save it to your package.json dependencies.

$ npm install jump.js --save


Import Jump, naming it according to your preference.

// import Jump

import jump from 'jump.js'


Jump exports a singleton, so there's no need to create an instance. Just call it, passing a target.

// call Jump, passing a target


Note that the singleton can make an infinite number of jumps.


All options, except target, are optional, and have sensible defaults. The defaults are shown below:

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

Explanation of each option follows:


Scroll from the current position by passing a number of pixels.

// scroll down 100px


// scroll up 100px


Or, scroll to an element, by passing either:

  • a node, or
  • a CSS selector
// passing a node

const node = document.querySelector('.target')


// passing a CSS selector
// the element referenced by the selector is determined using document.querySelector



Pass the time the jump() takes, in milliseconds.

jump('.target', {
  duration: 1000

Or, pass a function that returns the duration of the jump() in milliseconds. This function is passed the jump() distance, in px, as a parameter.

jump('.target', {
  duration: distance => Math.abs(distance)


Offset a jump(), only if to an element, by a number of pixels.

// stop 10px before the top of the element

jump('.target', {
  offset: -10

// stop 10px after the top of the element

jump('.target', {
  offset: 10

Note that this option is useful for accommodating position: fixed elements.


Pass a function that will be called after the jump() has been completed.

// in both regular and arrow functions, this === window

jump('.target', {
  callback: () => console.log('Jump completed!')


Easing function used to transition the jump().

jump('.target', {
  easing: easeInOutQuad

See easing.js for the definition of easeInOutQuad, the default easing function. Credit for this function goes to Robert Penner.


If enabled, and scrolling to an element:

jump('.target', {
  a11y: true

Note that this option is disabled by default because it has visual implications in many browsers. Focusing an element triggers the :focus CSS state selector, and is often accompanied by an outline.

Browser Support

Jump depends on the following browser APIs:

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+

To add support for older browsers, consider including polyfills/shims for the APIs listed above. There are no plans to include any in the library, in the interest of file size.


MIT. © 2017 Michael Cavalea

Built With Love

You can’t perform that action at this time.