Dynamic updating the URL/hash on page scrolling.

Downloads in past


3.5.05 years ago5 years agoMinified + gzip package size for react-update-url-on-scroll in KB


react-update-url-on-scroll ===================== npm version Lightweight library for updating the URL/hash on page scrolling in React.
  • Land on correct anchor when page is loaded, based on URL hash value or full url path.
  • URL updates automatically to reflect section in view.
  • Scroll smoothly to anchors when in-page URL changes.
  • Option to record history on URL/hash changes.
```js npm install --save react-update-url-on-scroll ```


Live Demo or Source To run examples locally, npm run example, then open your browser to localhost:3210.


  1. Creating a scrollable anchor

Use the ScrollableSection tag to wrap any React element(s), making it a scrollable anchor. Use the ScrollableLink to wrpar a link to the corresponding section. You may also set a meta attribute if you want to update a document title and meta-tags. ```js import React, { Component } from 'react'; import ScrollableSection, { ScrollableLink } from 'react-update-url-on-scroll'; export default class Page extends Component { render() {
return (
<ScrollableLink href="/section1">
<a> Go to section 1 </a>
<ScrollableLink href="/section2">
<a> Go to section 2 </a>
<ScrollableSection name={'section1'} meta={title: 'Section 1'} >
<div> Hello World </div>
<ScrollableSection name={'section2'} meta={title: 'Section 2'}>
<div> How are you world? </div>
} } ``` In this case the address will be changed to /section1 and /section2. You can also use hashes or combine path and hash updates: ```html Go to panel 1 Go to panel 2
Panel 1
Panel 2
``` ```html Go to section 1, section #surprise Go to section 1, section #nothing
``` You can also use exact prop if you want ot replace whole path with the given name/anchor. ```html

  1. Configure

Access configureAnchors to customize scrolling and anchors.
Offset all scrollable anchors by a fixed amount
```js import { configureAnchors } from 'react-update-url-on-scroll' // Offset all anchors by -60 to account for a fixed header // and scroll more quickly than the default 400ms configureAnchors({offset: 60}) ```
| option | default | description | | -------------------- | ---------------- | ---------------- | | affectHistory | false | Makes pushState if true and replaceState if false. | offset | 0 | Offset from top on scrolling to the section. Can be used if you have a sticky header. | keepLastAnchorHash | false | Keep last anchor hash. | debounce | 100 | Debouce the scroll event. | scrollDelay | 0 | Delay between page load and scrolling to the corresponding section. | scrollBehaviour | 'smooth' | Can be 'smooth', 'instant' and 'auto'. | scrollOnImagesLoad | false | Wait until all the images are loaded before scrolling to the section on page load. If it is a number the scrolling will be triggered in that timeout (in case images are still not loaded) | onSectionEnter | null | An event that is fired when user reaches to some another section. There are two attributes: onSectionEnter(newState, oldState) | meta | null | An object that may contain default title and meta-tags to set on page load. e.g. meta: {title: 'Hello', description: 'World'} | reloadOnGoingBack | false | Set true if you need the webpage to be reloaded when user press browser's back button

  1. 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
```js import { goToTop } from 'react-update-url-on-scroll' // scroll to top of the page goToTop() ```

Issues and feature requests

Please open issues on Github. Issues are easier to address if you include context and code samples.


Please contribute!