🔀 Merge pull request jpanther#806 from Jh123x/fix/772/set-to-top-elem…

…-on-scrollable-height feat: add js to check height and decide if to top is required
pitermarx · Aug 29, 2024 · 3f7453e · 3f7453e
2 parents 258ca2e + fce82b4
commit 3f7453e
Show file tree

Hide file tree

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

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -29,19 +29,23 @@
     <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 }}
       </main>
+      {{ if .Site.Params.footer.showScrollToTop | default true }}
+        <div
+          class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12"
+          id="to-top"
+          hidden="{{ .Site.Params.footer.showScrollToTop | default true -}}"
+        >
+          <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 }}
       {{- partial "footer.html" . -}}
       {{ if .Site.Params.enableSearch | default false }}
         {{- partial "search.html" . -}}