diff --git a/script.js b/script.js
index 228ad4e..192c8ae 100644
--- a/script.js
+++ b/script.js
@@ -52,6 +52,15 @@ Array.from(firstByLetter.entries())
     tocLetters?.appendChild(link);
   });
 
+// scroll TOC list when clicking a letter
+tocLetters?.addEventListener("click", (e) => {
+  if (e.target.tagName !== "A") return;
+  const href = e.target.getAttribute("href");
+  if (!href) return;
+  const tocLink = tocList?.querySelector(`a[href="${href}"]`);
+  tocLink?.scrollIntoView({ block: "start" });
+});
+
 const searchInput = document.getElementById("toc-search");
 let searchTimeout;
 searchInput?.addEventListener("input", (event) => {
diff --git a/style.css b/style.css
index 8431945..d2c411d 100644
--- a/style.css
+++ b/style.css
@@ -140,6 +140,7 @@ body {
   padding: 6px 8px;
   border-radius: 10px;
   display: block;
+  scroll-margin-top: 1rem;
   transition:
     background 0.2s ease,
     color 0.2s ease;