Anchor hash link scroll tracking and smooth scrolling
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
.gitignore
.npmignore
README.md
dist.js
index.js
package-lock.json
package.json

README.md

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