From f2a7ecc339141838a15ccfe576fbbf1b06a19f67 Mon Sep 17 00:00:00 2001
From: KazooTTT <turbopm@outlook.com>
Date: Tue, 15 Oct 2024 12:49:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E5=B9=B3=E6=BB=91?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/blog/TOCHeading.astro | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/blog/TOCHeading.astro b/src/components/blog/TOCHeading.astro
index 92ce034..fe50269 100644
--- a/src/components/blog/TOCHeading.astro
+++ b/src/components/blog/TOCHeading.astro
@@ -13,8 +13,9 @@ const {
 <li class={`${depth > 2 ? 'ms-2' : ''}`}>
 	<a
 		aria-label={`Scroll to section: ${text}`}
-		class={`block line-clamp-2  ${depth <= 2 ? 'mt-2' : 'mt-1 text-sm'} text-foreground/75 transition-all hover:text-foreground`}
-		href={`#${slug}`}>{text}</a
+		class={`block line-clamp-2 ${depth <= 2 ? 'mt-2' : 'mt-1 text-sm'} text-foreground/75 transition-all hover:text-foreground toc-link`}
+		href={`#${slug}`}
+		data-slug={slug}>{text}</a
 	>
 	{
 		!!subheadings.length && (
@@ -26,3 +27,19 @@ const {
 		)
 	}
 </li>
+
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const tocLinks = document.querySelectorAll('.toc-link')
+		tocLinks.forEach((link) => {
+			link.addEventListener('click', (event) => {
+				event.preventDefault()
+				const slug = link.getAttribute('data-slug')
+				const element = document.getElementById(slug)
+				if (element) {
+					element.scrollIntoView({ behavior: 'smooth' })
+				}
+			})
+		})
+	})
+</script>