Jump.js

A modern smooth scrolling library.

• Demo Page (Click the arrows!)

Usage

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

Install

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

$ npm install jump.js --save

Import

Import Jump, naming it according to your preference.

// import Jump

import jump from 'jump.js'

Call

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

// call Jump, passing a target

jump('.target')

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

Options

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

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

Explanation of each option follows:

• target
• duration
• offset
• callback
• container
• easing
• a11y

target

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

// scroll down 100px

jump(100)

// scroll up 100px

jump(-100)

Or, scroll to an element, by passing either:

• a node, or
• a CSS selector

// passing a node

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

jump(node)

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

jump('.target')

duration

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

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.

callback

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!')
})

container

Pass a custom container element instead of scrolling window. The option container can be a CSS selector or a node.

jump('.target', {
  container: '#myScrollableContainer'
})

easing

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.

a11y

If enabled, and scrolling to an element:

• add a tabindex to, and
• focus the 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:

• requestAnimationFrame

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.

License

MIT. © 2017 Michael Cavalea