feat: 菜单平滑滚动

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>