From 6dd1780925f262640a65ba99e31e92bc3da043da Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sun, 10 Mar 2024 14:54:54 +0100
Subject: [PATCH] Only smooth scrolling when clicking on toc

---
 src/components/AppLayout/components/Html.astro |  1 -
 .../components/TableOfContentItem.astro        | 18 +++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro
index 31fd21f..ca0d800 100644
--- a/src/components/AppLayout/components/Html.astro
+++ b/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;
   }
diff --git a/src/components/TableOfContent/components/TableOfContentItem.astro b/src/components/TableOfContent/components/TableOfContentItem.astro
index cd54a13..8eba736 100644
--- a/src/components/TableOfContent/components/TableOfContentItem.astro
+++ b/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>