react-scrollable-anchor
Lightweight library for smooth scrolling anchors in React, tied to URL hash.
- Land on correct anchor when page is loaded, based on URL hash value.
- Scroll smoothly to anchors when URL hash changes. Easy links to sections with
<a href='#sectionId'>
. - URL hash updates automatically to reflect section in view
- Option to record history on hash changes
npm install --save react-scrollable-anchor
Examples
Live Demo or SourceTo run examples locally,
npm run example
, then open your
browser to localhost:3210.Usage
- Creating a scrollable anchor
Use the ScrollableAnchor
tag to wrap any React element, making it a scrollable anchor.import React, { Component } from 'react'
import ScrollableAnchor from 'react-scrollable-anchor'
export default class Page extends Component {
render() {
return (
<div>
<a href='#section1'> Go to section 1 </a>
<a href='#section2'> Go to section 2 </a>
<ScrollableAnchor id={'section1'}>
<div> Hello World </div>
</ScrollableAnchor>
<ScrollableAnchor id={'section2'}>
<div> How are you world? </div>
</ScrollableAnchor>
</div>
)
}
}
- Configure
Access configureAnchors to customize scrolling and anchors.Offset all scrollable anchors by a fixed amount
import { configureAnchors } from 'react-scrollable-anchor'
// Offset all anchors by -60 to account for a fixed header
// and scroll more quickly than the default 400ms
configureAnchors({offset: -60, scrollDuration: 200})
Options:
| option | default | | -------------------- | ---------------- | |offset
| 0
|
| scrollDuration
| 400
|
| keepLastAnchorHash
| false
|- Utilities
A small toolkit of scrolling utilies for use with anchorsJump to top of page in a way that plays nicely with scrollable anchors
import { goToTop } from 'react-scrollable-anchor'
// scroll to top of the page
goToTop()
Scroll to any scrollable anchor, with option to record history
import { goToAnchor } from 'react-scrollable-anchor'
// scroll to #section1 without saving that hash update in history
goToAnchor('section1')
goToAnchor('section1', false)
// scroll to #section1, saving that hash update in history
goToAnchor('section1', true)
Clear the URL hash without affecting scroll location at all
import { removeHash } from 'react-scrollable-anchor'
// clear URL hash
removeHash()