Add smooth scroll behavior

site/gatsby-site/gatsby-browser.js

@@ -12,6 +12,51 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
   }
 };
 
+const onRouteUpdate = ({ location }) => scrollToAnchor(location);
+
+/**
+ * Scrolls smoothly to the anchor specified in the URL hash.
+ * If the page is still loading, it waits until the document is fully loaded.
+ * It uses requestAnimationFrame for efficient checking and scrolling.
+ *
+ * @param {object} location - The location object containing the URL.
+ * @param {number} mainNavHeight - The height of the main navigation to offset the scroll position (default is 0).
+ */
+function scrollToAnchor(location, mainNavHeight = 0) {
+  if (location && location.hash) {
+    const checkAndScroll = () => {
+      if (document.readyState === 'complete') {
+        const item = document.querySelector(location.hash);
+
+        if (item) {
+          const itemTop = item.offsetTop - mainNavHeight;
+
+          const itemBottom = itemTop + item.offsetHeight;
+
+          const viewportTop = window.scrollY;
+
+          const viewportBottom = viewportTop + window.innerHeight;
+
+          // Check if the item is already in view
+          if (itemBottom > viewportTop && itemTop < viewportBottom) {
+            return;
+          }
+
+          window.scrollTo({
+            top: itemTop,
+            behavior: 'smooth',
+          });
+        }
+      } else {
+        requestAnimationFrame(checkAndScroll);
+      }
+    };
+
+    requestAnimationFrame(checkAndScroll);
+  }
+  return true;
+}
+
 import { wrapRootElement, wrapPageElement } from './gatsby-shared';
 
-export { wrapPageElement, wrapRootElement };
+export { wrapPageElement, wrapRootElement, onRouteUpdate };

site/gatsby-site/src/global.css

@@ -46,6 +46,7 @@ html {
 body {
   font-family: 'Karla', sans-serif !important;
   font-size: 16px;
+  scroll-behavior: smooth;
 }
 
 html, body, #___gatsby, #gatsby-focus-wrapper {