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 =
Using a CDN
You can use unpkg with the URL: unpkg.com/anchor-hash-scroll/dist/build.min.js
Usage
For the NPM version, you can pass in configuration when you initialize it:
const anchorScroll = // takes options for smooth scrolling (jump.js)
When using via the CDN, you can configure it by using the global window.anchorHashScroll
object:
windowanchorHashScroll
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