anchor-hash-scroll

anchor-hash-scroll

Demo

Features:

• Finds all anchor links and their corresponding targets on a page and tracks scrolling, setting data-active attributes to true for links and targets within the current scroll.
• Customizable smooth scrolling using jump.js.
• Uses pushState to keep track of anchor jumping history.
• Supports dynamic page layouts (elements changing height after ajax, etc...).

See jump.js smooth scrolling options here.

Install

With npm

npm install --save anchor-hash-scroll

const scroll = require('anchor-hash-scroll')
scroll({
  offset: 32, // Amount of top padding for each section
  duration: 1500  // Milliseconds for the smooth scroll
})

Using a CDN

You can use unpkg with the URL: unpkg.com/anchor-hash-scroll/dist/build.min.js

<script src='//unpkg.com/anchor-hash-scroll/dist/build.min.js'></script>

Usage

For the NPM version, you can pass in configuration when you initialize it:

const anchorScroll = require('anchor-hash-scroll')
// takes options for smooth scrolling (jump.js)
anchorScroll({
  duration: 3000,
  offset: 0 - document.querySelector('#topNav').offsetHeight
})

When using via the CDN, you can configure it by using the global window.anchorHashScroll object:

window.anchorHashScroll.config({
  duration: 3000,
  offset: 0
})

Browser compatibility

This module uses addEventListener and querySelector, and no other modern features. Jump.js supports IE10+

Development

Build the distributions and example with npm run build-all

Run the example with something like npm install -g serve && serve docs

Lint the code with npm run lint