🔀 Merge pull request #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

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) => {

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" . -}}