Only smooth scrolling when clicking on toc

src/components/AppLayout/components/Html.astro

@@ -519,7 +519,6 @@ const { currentTheme } = Astro.locals;
   }
 
   * {
-    scroll-behavior: smooth;
     scrollbar-width: thin;
     scrollbar-color: var(--color-base-650) transparent;
   }

src/components/TableOfContent/components/TableOfContentItem.astro

@@ -11,7 +11,7 @@ const { entry } = Astro.props;
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <li data-prefix={entry.prefix}>
-  <a href={`#${entry.prefix}`} class="pressable-link">{entry.title}</a>
+  <a href={`#${entry.prefix}`} class="pressable-link table-of-content-item">{entry.title}</a>
   {
     entry.children.length > 0 && (
       <ol>
@@ -44,3 +44,19 @@ const { entry } = Astro.props;
     line-height: 125%;
   }
 </style>
+
+{/* ------------------------------------------- JS --------------------------------------------- */}
+
+<script>
+  document.querySelectorAll(".table-of-content-item").forEach((element) => {
+    const href = element.getAttribute("href")?.substring(1);
+    if (!href) return;
+    const heading = document.getElementById(href);
+    if (!heading) return;
+
+    element.addEventListener("click", (event) => {
+      heading.scrollIntoView({ behavior: "smooth" });
+      event.preventDefault();
+    });
+  });
+</script>