Add smooth scrolling to whole site with CSS

Author: stelcodes

src/components/TableOfContents.astro

@@ -53,20 +53,6 @@ const toc = generateToc(headings)
   </nav>
 </details>
 
-<script>
-  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-    anchor.addEventListener('click', function (e) {
-      e.preventDefault()
-      const href = anchor.getAttribute('href')
-      if (!href) return
-      const id = href.startsWith('#') ? href.slice(1) : href
-      document.getElementById(id)?.scrollIntoView({
-        behavior: 'smooth',
-      })
-    })
-  })
-</script>
-
 <style>
   details[open] summary:before {
     transform: rotate(90deg);

src/styles/global.css

@@ -46,6 +46,7 @@ html {
   scrollbar-color: color-mix(in oklab, var(--theme-accent) 30%, transparent) transparent !important;
   /* Prevents layout from jumping when opening theme select or search dialog menus */
   scrollbar-gutter: stable;
+  scroll-behavior: smooth;
 }
 
 body {