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 Source
To run examples locally, npm run example
, then open your
browser to localhost:3210.
Usage
1. 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>
)
}
}
2. Configure
Access configureAnchors to customize scrolling and anchors.
Offset all scrollable anchors by a fixed amount
import { configureAnchors } from 'react-scrollable-anchor'
configureAnchors({offset: -60, scrollDuration: 200})
Options:
option | default |
---|
offset | 0 |
scrollDuration | 400 |
keepLastAnchorHash | false |
3. Utilities
A small toolkit of scrolling utilies for use with anchors
Jump to top of page in a way that plays nicely with scrollable anchors
import { goToTop } from 'react-scrollable-anchor'
goToTop()
Scroll to any scrollable anchor, with option to record history
import { goToAnchor } from 'react-scrollable-anchor'
goToAnchor('section1')
goToAnchor('section1', false)
goToAnchor('section1', true)
Clear the URL hash without affecting scroll location at all
import { removeHash } from 'react-scrollable-anchor'
removeHash()
Issues and feature requests
Please open issues on Github. Issues are easier to address if you include context and code samples.
Contributing
Please contribute!
Feedback or contact
Feel free to contact me at gabergg@gmail.com.