fix(website): fix hash scrolling

Author: christianalfoni

packages/overmind-website/src/components/App/index.tsx

@@ -9,7 +9,7 @@ import Guide from '../Guide'
 import Videos from '../Videos'
 import Api from '../Api'
 import MobileTopBar from '../MobileTopBar'
-import { useIsMobile, useScrollToTop } from '../../utils'
+import { useIsMobile, useScrollToPosition } from '../../utils'
 import Footer from '../Footer'
 
 const pages = {
@@ -35,7 +35,7 @@ const App: SFC = () => {
   const { state } = useOvermind()
   const mainRef = useRef(null)
   const isMobile = useIsMobile()
-  useScrollToTop(state.page)
+  useScrollToPosition(state.page)
   useEffect(() => {
     fadeInPage()
     mainRef.current.style.opacity = '1'

packages/overmind-website/src/components/Doc/index.tsx

@@ -1,13 +1,13 @@
 import { createElement, SFC } from 'react'
 import * as styles from './styles'
-import { useScrollToTop } from '../../utils'
+import { useScrollToPosition } from '../../utils'
 
 type Props = {
   url: string
 }
 
 const Doc: SFC<Props> = ({ url, children }) => {
-  useScrollToTop(url)
+  useScrollToPosition(url)
 
   return (
     <div className={styles.content}>

packages/overmind-website/src/utils.tsx

@@ -209,10 +209,15 @@ export const useIsMobile = () => {
   return isMobile
 }
 
-export const useScrollToTop = (value) => {
+export const useScrollToPosition = (value) => {
   useEffect(
     () => {
       document.querySelector('#overmind-app').scrollTop = 0
+
+      if (location.hash) {
+        const hashElement = document.querySelector(location.hash)
+        hashElement && hashElement.scrollIntoView()
+      }
     },
     [value]
   )