From 9bde54a41ce9534c5ae49d4717dc9722f02c3de0 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Mon, 9 Mar 2026 09:05:53 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Update=20"back=20to=20top"?=
 =?UTF-8?q?=20button=20to=20work=20on=20scroll=20up=20after=20scroll=20dow?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/js/components/backToTop.js | 44 +++++++++++++++++++------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/static/js/components/backToTop.js b/static/js/components/backToTop.js
index 6d95feb..7d92f76 100644
--- a/static/js/components/backToTop.js
+++ b/static/js/components/backToTop.js
@@ -1,23 +1,33 @@
 // Back to Top Button Component
 class BackToTopButton extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <button id="backToTopBtn" aria-label="Back to top" class="back-to-top" style="display:none;position:fixed;bottom:2rem;right:2rem;z-index:1000;padding:0.75em 1.5em;font-size:1.1rem;border-radius:2em;background:var(--color-primary,#3857BC);color:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer;transition:opacity 0.2s;">
-        ↑ Top
-      </button>
-    `;
-    const btn = this.querySelector('#backToTopBtn');
-    window.addEventListener('scroll', () => {
-      btn.style.display = window.scrollY > 300 ? 'block' : 'none';
-    });
-    btn.addEventListener('click', () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    });
-  }
+    connectedCallback() {
+        this.innerHTML = `
+            <button id="backToTopBtn" aria-label="Back to top" class="back-to-top" style="display:none;position:fixed;bottom:2rem;right:2rem;z-index:1000;padding:0.75em 1.5em;font-size:1.1rem;border-radius:2em;background:var(--color-primary,#3857BC);color:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer;transition:opacity 0.2s;">
+                ↑ Top
+            </button>
+        `;
+
+        const btn = this.querySelector('#backToTopBtn');
+
+        let previousScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+            const isScrollingUp = currentScrollY < previousScrollY;
+            const shouldShowButton = currentScrollY > 300 && isScrollingUp;
+
+            btn.style.display = shouldShowButton ? 'block' : 'none';
+            previousScrollY = currentScrollY;
+        });
+
+        btn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    }
 }
 
 export function registerBackToTopButton() {
-  if (!customElements.get('back-to-top')) {
-    customElements.define('back-to-top', BackToTopButton);
-  }
+    if (!customElements.get('back-to-top')) {
+        customElements.define('back-to-top', BackToTopButton);
+    }
 }