[Aliki] Add smooth-scroll handler to link inside heading tag (#1469)

Clicking on TOC link smoothly scrolls to heading tag.
This pull request add this smooth scroll feature also to `<h1><a
href="#heading-itself"></a></h1>`

Author: tompng

lib/rdoc/generator/template/aliki/js/aliki.js

@@ -195,6 +195,7 @@ function generateToc() {
     link.setAttribute('data-target', heading.id);
 
     li.appendChild(link);
+    setHeadingScrollHandler(heading, link);
     tocList.appendChild(li);
   });
 
@@ -271,21 +272,30 @@ function hookTocActiveHighlighting() {
   targetHeadings.forEach((heading) => {
     observer.observe(heading);
   });
+}
 
-  // Smooth scroll when clicking TOC links
-  tocLinks.forEach((link) => {
-    link.addEventListener('click', (e) => {
-      e.preventDefault();
-      const targetId = link.getAttribute('data-target');
-      const targetHeading = document.getElementById(targetId);
-      if (targetHeading) {
-        targetHeading.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        history.pushState(null, '', `#${targetId}`);
-      }
-    });
+function setHeadingScrollHandler(heading, link) {
+  // Smooth scroll to heading when clicking link
+  if (!heading.id) return;
+
+  link.addEventListener('click', (e) => {
+    e.preventDefault();
+    heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    history.pushState(null, '', `#${heading.id}`);
   });
 }
 
+function setHeadingSelfLinkScrollHandlers() {
+  // Clicking link inside heading scrolls smoothly to heading itself
+  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  headings.forEach((heading) => {
+    if (!heading.id) return;
+
+    const link = heading.querySelector(`a[href^="#${heading.id}"]`);
+    if (link) setHeadingScrollHandler(heading, link);
+  })
+}
+
 /* ===== Mobile Search Modal ===== */
 
 function hookSearchModal() {
@@ -466,6 +476,7 @@ document.addEventListener('DOMContentLoaded', () => {
   hookFocus();
   hookSidebar();
   generateToc();
+  setHeadingSelfLinkScrollHandlers();
   hookTocActiveHighlighting();
   hookSearchModal();
   wrapCodeBlocksWithCopyButton();