docs(Layout): fix scroll to anchor (Semantic-Org#1338)

harel · Feb 18, 2017 · 3b19184 · 3b19184
1 parent 30bdbef
commit 3b19184
Showing 1 changed file with 25 additions and 5 deletions.
diff --git a/docs/app/Components/Layout.js b/docs/app/Components/Layout.js
@@ -15,20 +15,40 @@ export default class Layout extends Component {
     children: PropTypes.node,
   }
 
+  componentDidMount() {
+    this.resetPage()
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.resetPage()
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.scrollStartTimeout)
+  }
+
   resetPage = () => {
     window.scrollTo(0, 0)
     anchors
       .add('h2, h3, h4, h5, h6')
       .remove([1, 2, 3, 4, 5, 6].map(n => `.rendered-example h${n}`).join(', '))
       .remove('.no-anchor')
-  }
 
-  componentDidMount() {
-    this.resetPage()
+    this.scrollStartTimeout = setTimeout(this.scrollToAnchor(), 2000)
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    this.resetPage()
+  scrollToAnchor = () => {
+    const anchor = location.hash && document.querySelector(location.hash)
+
+    if (!anchor) return
+
+    const elementTop = Math.round(anchor.getBoundingClientRect().top)
+
+    if (elementTop !== 0) {
+      const step = Math.ceil(elementTop / Math.max(15 - Math.log(elementTop), 1))
+      window.scrollBy(0, step)
+      requestAnimationFrame(this.scrollToAnchor)
+    }
   }
 
   render() {