JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    A small, modern, dependency-free smooth scrolling library.
    Filed under 

    • 🔾57%Overall
    • 3,410
    • 19 days
    • 🕩183
    • 👥6

    Jump.js

    Jump.js on NPM Jump.js Downloads on NPM Standard JavaScript Style

    A modern smooth scrolling library.

    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:

    1. Install
    2. Import
    3. Call
    4. Review Options

    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

    Built With Love

    Show All