A small, modern, dependency-free smooth scrolling library.
- Demo Page (Click the arrows!)
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:
Using NPM, install Jump.js, and add it to your package.json dependencies.
$ npm install jump.js --save
Simply import Jump, then instantialize 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.
Two parameters are required to make a jump:
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...
})
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
})
How long the jump()
takes, in milliseconds.
Jump.jump('.selector', {
duration: 1000
})
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
})
Fired after the jump()
has been completed.
Jump.jump('.selector', {
callback: () => {
console.log('Jump completed!')
}
})
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. © 2015 Michael Cavalea