callmecavs/jump.js
Fork: 161 Star: 3463 (更新于 2024-12-08 08:56:31)
license: MIT
Language: JavaScript .
A modern smooth scrolling library.
最后发布版本: v1.0.2 ( 2017-01-09 05:44:24)
Jump.js
A modern 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
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
最近版本更新:(数据更新于 2024-10-11 01:24:44)
2017-01-09 05:44:24 v1.0.2
2016-07-16 16:22:10 v1.0.1
2016-07-16 14:34:21 v1.0.0
2016-05-14 13:41:59 v0.4.0
2016-03-01 12:29:34 v0.3.2
2015-12-03 04:03:39 v0.3.1
2015-12-02 11:24:49 v0.3.0
2015-12-01 07:59:22 v0.2.1
2015-12-01 07:50:06 v0.2.0
2015-11-30 09:01:28 v0.1.3
主题(topics):
scroll, scrolling, smooth
callmecavs/jump.js同语言 JavaScript最近更新仓库
2024-12-22 13:19:55 gethomepage/homepage
2024-12-22 11:34:40 chris81605/Degrees-of-Lewdity_Cheat_Extended
2024-12-22 00:44:14 gorhill/uBlock
2024-12-21 12:14:02 layui/layui
2024-12-21 03:44:01 emberjs/ember.js
2024-12-20 02:57:09 nodejs/node