Scroll To Top Button Fixes #7

PrathameshDhande22 · PrathameshDhande22 · commit 9bf7938c66a9 · 2025-04-03T00:18:56.000+05:30
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -10,6 +10,8 @@ import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
 // @ts-ignore
 import mermaidScript from "./scripts/mermaid.inline"
+// @ts-ignore
+import scrolltotopScript from "./scripts/scrolltotop.inline"
 import mermaidStyle from "./styles/mermaid.inline.scss"
 import { QuartzPluginData } from "../plugins/vfile"
 
@@ -238,6 +240,31 @@ export function renderPage(
     </div>
   )
 
+  const ScrollToTop = (
+    <button id="scrollToTopBtn" title="Go to top">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="18 15 12 9 6 15"></polyline>
+      </svg>
+    </button>
+  )
+
+  pageResources.js.push({
+    script: scrolltotopScript,
+    loadTime: "afterDOMReady",
+    moduleType: "module",
+    contentType: "inline",
+  })
+
   const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
   const doc = (
     <html lang={lang} saved-theme="dark">
@@ -259,6 +286,7 @@ export function renderPage(
                     <BodyComponent {...componentData} />
                   ))}
                 </div>
+                {ScrollToTop}
               </div>
               <Content {...componentData} />
               <hr />
diff --git a/quartz/components/scripts/scrolltotop.inline.ts b/quartz/components/scripts/scrolltotop.inline.ts
@@ -0,0 +1,19 @@
+// Get the button element
+const scrollToTopBtn = document.getElementById("scrollToTopBtn")!;
+
+// Show or hide the button based on scroll position
+window.addEventListener("scroll", () => {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        scrollToTopBtn.classList.add("show");
+    } else {
+        scrollToTopBtn.classList.remove("show");
+    }
+});
+
+// Scroll to the top of the page on button click
+scrollToTopBtn.addEventListener("click", () => {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+});
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -26,3 +26,31 @@ ul.overflow > li:last-of-type {
         display: none;
     }
 }
+
+/* Scroll To Top CSS */
+#scrollToTopBtn {
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    background-color: var(--lightgray);
+    color: white;
+    border: 1px solid var(--darkgray);
+    padding: 3px 5px;
+    border-radius: 100px;
+    cursor: pointer;
+    font-size: 16px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    z-index: 100;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+}
+
+#scrollToTopBtn.show {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+#scrollToTopBtn:hover {
+    background-color: var(--secondary);
+}
