Smooth scroll

src/pages/privacy.tsx

@@ -1,9 +1,25 @@
+import type { MouseEventHandler, ReactNode } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import { IS_OFFICIAL_HOST } from '@/config/constants'
 
+const SmoothScroll = ({ children }: { children: ReactNode }) => {
+  const onClick: MouseEventHandler = (e) => {
+    const anchor = (e.target as HTMLAnchorElement).getAttribute('href')
+    if (anchor?.startsWith('#')) {
+      e.preventDefault()
+      const element = document.querySelector(anchor)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
+  }
+
+  return <div onClick={onClick}>{children}</div>
+}
+
 const SafePrivacyPolicy = () => (
-  <div>
+  <SmoothScroll>
     <style jsx>{`
       ol {
         list-style: lower-alpha;
@@ -26,6 +42,10 @@ const SafePrivacyPolicy = () => (
         font-weight: 600;
         text-decoration: underline;
       }
+
+      [id^='section-'] {
+        scroll-margin-top: 60px;
+      }
     `}</style>
 
     <h1>Privacy Policy</h1>
@@ -969,7 +989,7 @@ const SafePrivacyPolicy = () => (
     <p>
       <a href="mailto:[email protected]">[email protected]</a>
     </p>
-  </div>
+  </SmoothScroll>
 )
 
 const PrivacyPolicy: NextPage = () => {