hashjump

A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.

Features

Tiny (Around ~8kb minified)
Zero dependencies
Supports horizontal as well as vertical scrolling
Supports easing functions for scrolling animations (even custom ones so things like d3-ease are supported!)
Supports custom functions for when anchor links are clicked or the page was visited with an anchor link
Scroll the window to bring your element to the center of the viewport (or any other position in the viewport)

Demo

Installation

Manual Download

Download the latest version of hashjump and then place the following HTML in your page's head element:

<script type="text/javascript" src="dist/hashjump.min.js"></script>

CDN (Courtesy of jsDelivr)

Place the following HTML in your page's head element (check to make sure the version in the URLs are the version you want):

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kodie/hashjump@0.0.1/dist/hashjump.min.js"></script>

NPM

npm install hashjump --save

// ES6
import hashjump from 'hashjump'
// CommonJS
const hashjump = require('hashjump')

GPM

gpm install kodie/hashjump --save

Bower

bower install kodie/hashjump --save

Usage

`hashjump` Function

hashjump([targetHashes], [opts])

hashjump([opts])

Initializes hashjump for the defined targetHashes anchor links (or all anchor links if omitted). Sets page load and link click event handlers and saves opts.

Note: If running this function multiple times, you should always call any instances with targetHashes set before calling an instance without (global instance).

Parameters

targetHashes (Optional) - Accepts a string or an array of strings defining anchor links (minus the #) that should be targeted for this instance.
opts (Optional) - Accepts an object of options you can define to change the behavior of hashjump. (See Options Section)

Examples

document.addEventListener('DOMContentLoaded', function () {
  hashjump('section-2', {
    hideUrlHash: true,
    focusElement: true
  })

  hashjump('section-4', {
    easingFunction: function (t) { return d3.easeElasticInOut(t) },
    scrollDuration: 2000,
    scrollOffset: 'inner-50%'
  })

  hashjump({
    actionAfter: function (info) { console.log(info) }
  })
})

`hashjump.to` Function

hashjump.to([target], [opts])

hashjump.to([opts])

Scrolls to the specified target. Retains any opts that may have been previously set by the hashjump() init function but can be overwritten with the opts parameter.

Paramters

target - Accepts a string of the anchor link or element ID (minus the #), an instance of HTMLElement, or null to use the document body as the element to scroll to.
opts (Optional) - Accepts an object of options you can define to change the behavior of hashjump. (See Options Section)

Options

action

A function that will replace the scroll event and gets passed an object as the only parameter with some useful information about the instance (See Action Info Section). Useful for performing an action other than scrolling to an element when an anchor link is clicked or visited.

actionAfter

A function that will be ran after the scroll event and gets passed an object as the only parameter with some useful information about the instance (See Action Info Section).

actionBefore

A function that will be ran before the scroll event and gets passed an object as the only parameter with some useful information about the instance (See Action Info Section). If this function returns false, the scroll event will not occur.

focusElement

Decides if the element should be focused after the scroll event or not. Accepts a selector string that is passed to element.matches, a custom function that is passed the element as it's only parameter and should return boolean, or a boolean.

hashjumpLinks

Decides if anchor links on the page should have hashjumpLinkEvents attached to them that runs the hashjump.to() function. Accepts a boolean.