fix(article): footnote reference does not work

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/632

1 files changed, 7 insertions, 4 deletions

diff --git a/assets/ts/smoothAnchors.ts b/assets/ts/smoothAnchors.ts
index 379eb39..46a4a03 100644
--- a/assets/ts/smoothAnchors.ts
+++ b/assets/ts/smoothAnchors.ts
@@ -21,12 +21,15 @@ function setupSmoothAnchors() {
         aElement.addEventListener("click", clickEvent => {
             clickEvent.preventDefault();
 
-            let targetId = aElement.getAttribute("href").substring(1);
-            // The replace done on ':' is here for footnotes, as this character would otherwise interfere when used as a CSS selector.
-            let target = document.getElementById(targetId.replace(":", "\\:")) as HTMLElement;
+            const targetId = aElement.getAttribute("href").substring(1),
+                target = document.getElementById(targetId) as HTMLElement, 
+                offset = target.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top;
 
             window.history.pushState({}, "", aElement.getAttribute("href"));
-            scrollTo({ top: target.offsetTop, behavior: "smooth" });
+            scrollTo({
+                top: offset,
+                behavior: "smooth"
+            });
         });
     });
 }