albertolarah / jump.js

A small, modern, dependency-free smooth scrolling library.

Jump.js

A small, modern, dependency-free 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:

• Install
• Instantiate
• Jump

Install

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

$ npm install jump.js --save

Instantiate

Simply import Jump, then instantiate it. No options are passed to the constructor.

// import Jump
import Jump from 'jump.js'

// create an instance
const Jump = new Jump()

It's recommended that you assign your Jump instance to a variable. One instance can make infinite jumps.

Jump

Two parameters are required to make a jump:

• A target
• An options object

Target

To jump to an element, pass a CSS selector as a string.

Jump.jump('.selector', {
  // options...
})

To scroll from the current position, pass a number of pixels, positive or negative.

// down one viewport height
Jump.jump(window.innerHeight, {
  // options...
})

// up 100px
Jump.jump(-100, {
  // options...
})

Options

Note that duration is required for every jump().

Defaults are shown below, explanation of each option follows.

Jump.jump('.selector', {
  duration: /* REQUIRED, no default */,
  offset: 0,
  callback: undefined,
  easing: (t, b, c, d) => {
    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    t /= d / 2
    if(t < 1) return c / 2 * t * t + b
    t--
    return -c / 2 * (t * (t - 2) - 1) + b
  }
})

duration

How long the jump() takes, in milliseconds.

Jump.jump('.selector', {
  duration: 1000
})

Or, a function accepting distance (in px) as an argument, and returning the duration (in milliseconds) as a number.

Jump.jump('.selector', {
  duration: (distance) => Math.abs(distance)
})

offset

Offset a jump(), only if to an element, in pixels.

Useful for accomodating elements fixed to the top/bottom of the screen.

Jump.jump('.selector', {
  offset: 100
})

callback

Fired after the jump() has been completed.

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

easing

Easing function used to transition the jump().

Jump.jump('.selector', {
  easing: (t, b, c, d) => {
    return c * (t /= d) * t + b
  }
})

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. © 2015 Michael Cavalea