From f7c62f59621c75002d10afc0dfcf80cb32cd9485 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 11 Jun 2024 04:22:50 +0800
Subject: [PATCH] Overhaul back to top button and link

Make back-to-top button an anchor element and shows back to top text link if JavaScript is disabled
---
 src/_includes/global/footer.njk  | 19 -----------
 src/_includes/global/top-btn.njk | 56 ++++++++++++++++++++++++--------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/src/_includes/global/footer.njk b/src/_includes/global/footer.njk
index e72355cb..00e912a8 100644
--- a/src/_includes/global/footer.njk
+++ b/src/_includes/global/footer.njk
@@ -13,7 +13,6 @@
         </nav>
     {%- endif -%}
 
-    <p><a class="footer__top-link" href="#top">Back to Top</a></p>
     {%- include "global/top-btn.njk" %}
 </footer>
 
@@ -55,24 +54,6 @@
         justify-self: center;
     }
 
-    .footer__top-link::before,
-    .footer__top-link::after {
-        --arrow-margin: 0.3em;
-        content: "";
-        display: inline-block;
-        border-bottom: 0.6rem solid currentColor;
-        border-left: 0.4rem solid transparent;
-        border-right: 0.4rem solid transparent;
-    }
-
-    .footer__top-link::before {
-        margin: 0 var(--arrow-margin) 0 0;
-    }
-
-    .footer__top-link::after {
-        margin: 0 0 0 var(--arrow-margin);
-    }
-
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
diff --git a/src/_includes/global/top-btn.njk b/src/_includes/global/top-btn.njk
index fb734623..4bcbd3bb 100644
--- a/src/_includes/global/top-btn.njk
+++ b/src/_includes/global/top-btn.njk
@@ -1,22 +1,28 @@
-<button class="top-btn hidden" aria-label="Scroll to top">
+<a href="#top" class="top-btn hidden">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
     </svg>
-</button>
+    <span class="visually-hidden">Back to Top</span>
+</a>
+<noscript>
+    <p><a class="top-link" href="#top">Back to Top</a></p>
+</noscript>
 
 <style>
+    .top-btn,
+    .top-btn:hover {
+        color: var(--clr-top-btn-txt);
+    }
+
     .top-btn {
         position: fixed;
-        margin: 0;
-        padding: 0;
         bottom: 0.5rem;
         right: 0.5rem;
         z-index: 999;
-        border: none;
+
         background-color: var(--clr-top-btn-bg);
-        color: var(--clr-top-btn-txt);
         border-radius: 50em;
-        width: 2rem;
+        height: 2rem;
         aspect-ratio: 1 / 1;
     }
 
@@ -24,23 +30,47 @@
         outline: 0.25em solid var(--clr-top-btn-bg);
         outline-offset: 0.15em;
     }
+
+    .top-link::before,
+    .top-link::after {
+        --arrow-margin: 0.3em;
+        content: "";
+        display: inline-block;
+        border-bottom: 0.6rem solid currentColor;
+        border-left: 0.4rem solid transparent;
+        border-right: 0.4rem solid transparent;
+    }
+
+    .top-link::before {
+        margin: 0 var(--arrow-margin) 0 0;
+    }
+
+    .top-link::after {
+        margin: 0 0 0 var(--arrow-margin);
+    }
 </style>
 
 <script defer>
+    {# Based on: https://jhartshorne.co.uk/posts/back-to-top/ #}
     const topButton = document.querySelector(".top-btn");
+    const scrollOffset = 400;
 
     window.onscroll = () => {
-        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        if (document.body.scrollTop > scrollOffset || document.documentElement.scrollTop > scrollOffset) {
             topButton.classList.remove("hidden");
         } else {
             topButton.classList.add("hidden");
         }
-    }
+    };
+
+    const scrollOptions = {
+        top: 0,
+        left: 0,
+        behavior: 'smooth'
+    };
+    const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
 
     topButton.addEventListener('click', () => {
-        window.scrollTo({
-            top: 0,
-            left: 0,
-        });
+        supportsNativeSmoothScroll ? window.scrollTo(scrollOptions) : window.scrollTo(scrollOptions.left, scrollOptions.top);
     });
 </script>
\ No newline at end of file