一個平滑滾動JS庫：jump.js
一個小的，現代的，沒有任何依賴的平滑滾動JS庫。
- Demo Page (Click the arrows!) </ul>
- Chrome 24+
- Firefox 23+
- Safari 6.1+
- Opera 15+
- IE 10+
- iOS Safari 7.1+
- Android Browser 4.4+
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
Using NPM, install Jump.js, and add it to your package.json dependencies.
$ npm install jump.js --save
Instance
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.
Jump
Two parameters are required to make a jump:
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 everyjump().
Defaults are shown below, explanation of each option follows.
Jump.jump('.selector', { duration: /* REQUIRED, no default */, offset: 0, callback: undefined })
duration
How long thejump()takes, in milliseconds.
Jump.jump('.selector', { duration: 1000 })
offset
Offset ajump(), 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 thejump()has been completed.
Jump.jump('.selector', { callback: () => { console.log('Jump completed!') } })
Browser Support
Jump depends on the following browser APIs:
Consequently, it supports the following natively:
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.