一个平滑滚动JS库:jump.js

jopen 9年前

一个小的,现代的,没有任何依赖的平滑滚动JS库。

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:

  • 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.

项目主页:http://www.open-open.com/lib/view/home/1448850393670