Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Jump.js

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

A modern smooth scrolling library.

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,
  easing: easeInOutQuad,
  a11y: false
})

Explanation of each option follows:

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

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:

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.

License

MIT. © 2017 Michael Cavalea

Built With Love

You can’t perform that action at this time.