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

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", () => {

layouts/_default/baseof.html

@@ -29,8 +29,11 @@
     <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
-          <div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12">
+          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"
@@ -40,7 +43,6 @@
             &uarr;
           </a>
         </div>
-        {{ end }}
       </main>
       {{- partial "footer.html" . -}}
       {{ if .Site.Params.enableSearch | default false }}