js
import { useEffect } from 'react'
useEffect(() => {
const { hash } = location
if (!hash) return
window.requestAnimationFrame(() => {
const anchor = document.querySelector(hash)
const offset = anchor.getBoundingClientRect().top + window.scrollY
window.scroll({ top: offset, left: 0 })
})
}, [])
Context
It is commonly known you can scroll a website on load to a specific element by appending the id of said element after a hash to a url. However, if the content is not present when the page finishes load, the browser will not be able to do the scrolling automatically. This snippet takes care of scrolling to the selected element (if any) once content has loaded.
Keep in mind you'll need to accept the location
prop from your Gatsby page to get the hash.