Add custom hash update function prop

README.md

@@ -49,6 +49,20 @@ export default class Page extends Component {
 }
 ```
 
+The `ScrollableAnchor` component has a optional `customHashUpdater` (function) prop, that overrides the default one.
+This is useful when you have problems especially with `react-router` doing complete re-renders of the `Route` component
+that results in jumping to the top of the component after scrolling to a different section.
+
+The `customHashUpdater` receives the id of the section and can be used like this:
+```js
+// Uses the react-router history prop
+const goToSection = id => history.push({ hash: `#${id}` });
+
+<ScrollableAnchor id={'section1'} cu>
+  <div> Hello World </div>
+</ScrollableAnchor>
+```
+
 ### 2. Configure
 
 Access configureAnchors to customize scrolling and anchors.

src/Manager.js

@@ -42,13 +42,16 @@ class Manager {
     window.scroll(0,0)
   }
 
-  addAnchor = (id, component) => {
+  addAnchor = (id, component, customHashUpdater) => {
     // if this is the first anchor, set up listeners
     if (Object.keys(this.anchors).length === 0) {
       this.addListeners()
     }
     this.forceHashUpdate()
-    this.anchors[id] = component
+    this.anchors[id] = {
+      component,
+      customHashUpdater,
+    }
   }
 
   removeAnchor = (id) => {
@@ -62,10 +65,13 @@ class Manager {
   handleScroll = () => {
     const {offset, keepLastAnchorHash} = this.config
     const bestAnchorId = getBestAnchorGivenScrollLocation(this.anchors, offset)
-
     if (bestAnchorId && getHash() !== bestAnchorId) {
       this.forcedHash = true
-      updateHash(bestAnchorId, false)
+      if (this.anchors[bestAnchorId].customHashUpdater) {
+        this.anchors[bestAnchorId].customHashUpdater(bestAnchorId)
+      } else {
+        updateHash(bestAnchorId, false)
+      }
     } else if (!bestAnchorId && !keepLastAnchorHash) {
       removeHash()
     }
@@ -80,7 +86,7 @@ class Manager {
   }
 
   goToSection = (id) => {
-    let element = this.anchors[id]
+    let element = this.anchors[id] && this.anchors[id].component
     if (element) {
       jump(element, {
         duration: this.config.scrollDuration,

src/ScrollableAnchor.js

@@ -16,7 +16,7 @@ export default class ScrollableAnchor extends Component {
 
   componentDidMount() {
     const element = ReactDOM.findDOMNode(this.refs[Object.keys(this.refs)[0]])
-    Manager.addAnchor(this.id, element)
+    Manager.addAnchor(this.id, element, this.props.customHashUpdater)
   }
 
   componentWillUnmount() {

src/utils/hash.js

@@ -6,7 +6,8 @@ export const updateHash = (hash, affectHistory) => {
   if (affectHistory) {
     window.location.hash = hash
   } else {
-    window.location.replace(`#${hash}`)
+    const { pathname, search } = window.location
+    window.location.replace(`${pathname}${search}#${hash}`)
   }
 }
 

src/utils/scroll.js

@@ -66,7 +66,7 @@ export const getBestAnchorGivenScrollLocation = (anchors, offset) => {
   let bestId, bestElement
 
   Object.keys(anchors).forEach((id) => {
-    const element = anchors[id]
+    const element = anchors[id].component
     if (doesElementContainScrollTop(element, offset)) {
       if (!bestElement || checkElementRelevance(bestElement, element)) {
         bestElement = element