New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/smooth-scrolling-library-jump-js/
Smooth Scrolling Library - Jump.js
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 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.
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, 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 )
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 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!') )
Easing function used to transition the jump().
Jump.jump('.selector', easing: (t, b, c, d) => return c * (t /= d) * t + b )
