fix(gatsby-remark-autolink-headers): include scroll-margin in getTargetOffset (#24018)

* fix: include scroll-margin in getTargetOffset

* fix: add safari safeguard

* chore: format

Co-authored-by: gatsbybot <[email protected]>

Author: mrozilla

Diff for: packages/gatsby-remark-autolink-headers/src/gatsby-browser.js

@@ -11,8 +11,18 @@ const getTargetOffset = hash => {
         document.body.scrollTop
       let clientTop =
         document.documentElement.clientTop || document.body.clientTop || 0
+      let computedStyles = window.getComputedStyle(element)
+      let scrollMarginTop =
+        computedStyles.getPropertyValue(`scroll-margin-top`) ||
+        computedStyles.getPropertyValue(`scroll-snap-margin-top`) ||
+        `0px`
+
       return (
-        element.getBoundingClientRect().top + scrollTop - clientTop - offsetY
+        element.getBoundingClientRect().top +
+        scrollTop -
+        parseInt(scrollMarginTop, 10) -
+        clientTop -
+        offsetY
       )
     }
   }