feat: scroll page to target heading when event hashchange has been …

…triggered
parksben · Jan 14, 2020 · e76941d · e76941d
1 parent 476f0e5
commit e76941d
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -38,6 +38,7 @@ export class MarkdownNavbar extends Component {
     this.addTargetTimeout = setTimeout(() => {
       this.initHeadingsId();
       document.addEventListener('scroll', this.winScroll, false);
+      window.addEventListener('hashchange', this.winHashChange, false);
     }, 500);
   }
 
@@ -71,6 +72,7 @@ export class MarkdownNavbar extends Component {
       clearTimeout(this.scrollTimeout);
     }
     document.removeEventListener('scroll', this.winScroll, false);
+    window.removeEventListener('hashchange', this.winHashChange, false);
   }
 
   getNavStructure() {
@@ -143,7 +145,9 @@ export class MarkdownNavbar extends Component {
 
     this.scrollTimeout = setTimeout(() => {
       const target = document.querySelector(`[data-id="${dataId}"]`);
-      window.scrollTo(0, target.offsetTop - this.props.headingTopOffset);
+      if (target && typeof target.offsetTop === 'number') {
+        window.scrollTo(0, target.offsetTop - this.props.headingTopOffset);
+      }
     }, 0);
   }
 
@@ -236,6 +240,10 @@ export class MarkdownNavbar extends Component {
     });
   };
 
+  winHashChange = () => {
+    this.scrollToTarget(this.getCurrentHashValue());
+  };
+
   updateHash(value) {
     window.history.replaceState(
       {},