feat: add js to check height and decide if to top is required

jpanther · Feb 6, 2024 · 62d4d41 · 62d4d41
1 parent 94feae3
commit 62d4d41
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/assets/js/appearance.js b/assets/js/appearance.js
@@ -38,7 +38,22 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
   });
 }
 
+function add_to_top_elem() {
+  var body = document.body,
+    html = document.documentElement;
+
+  const height = Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    html.clientHeight,
+    html.scrollHeight,
+    html.offsetHeight
+  ) - 150;
+  document.getElementById("to-top").hidden = height < window.innerHeight;
+}
+
 window.addEventListener("DOMContentLoaded", (event) => {
+  add_to_top_elem();
   var switchers = document.querySelectorAll("[id^='appearance-switcher']");
   switchers.forEach((switcher) => {
     switcher.addEventListener("click", () => {

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -29,18 +29,20 @@
     <div class="relative flex grow flex-col">
       <main id="main-content" class="grow">
         {{ block "main" . }}{{ end }}
-        {{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }}
-          <div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12">
-            <a
-              href="#the-top"
-              class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
-              aria-label="{{ i18n "nav.scroll_to_top_title" }}"
-              title="{{ i18n "nav.scroll_to_top_title" }}"
-            >
-              &uarr;
-            </a>
-          </div>
-        {{ end }}
+        <div
+          class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12"
+          id="to-top"
+          hidden
+        >
+          <a
+            href="#the-top"
+            class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
+            aria-label="{{ i18n "nav.scroll_to_top_title" }}"
+            title="{{ i18n "nav.scroll_to_top_title" }}"
+          >
+            &uarr;
+          </a>
+        </div>
       </main>
       {{- partial "footer.html" . -}}
       {{ if .Site.Params.enableSearch | default false }}