jayrbolton/anchor-hash-scroll

Anchor hash link scroll tracking and smooth scrolling

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

anchor-hash-scroll's Issues

scroll tracking offset bug

it appears that the scroll tracking is adding an extra offset. see the demo: nav highlight switches when you are 50px or so above the actual section

Highlight page-bottom sections on scroll that the window top cannot reach

Not sure how to handle this exactly, or if we should even bother

How to use without a module bundler

Hello, this project looks very useful to me, great work!

I want to use it in a static site that I'm building. I don't use a module bundler or a package manager for dependencies. I was wondering if you have something like a CDN link that I could use in a script tag?

UI improvements

Some issues we noticed while using this for Rally Starter:

• If a target section is too short to reach the top of the screen, the data-active attr doesn't get applied to the corresponding link
• If a link is clicked before the scrolling is finished, the page jumps around
• Preferably, the data-active attr should be set right when the link is clicked