fianlly fixed STT button (window scroll event fixes)

_includes/scroll-to-top.html

@@ -1,35 +1,45 @@
-<script>
+<a href="#" 
-    // When the user scrolls down from the top of the document, show the button
+   id="scroll-to-top" 
-    window.onscroll = function () {
+   class="btn btn-link" 
-        if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
+   title="Back to Top"
-            document.getElementById("scroll-to-top").style.display = "block";
+   aria-label="Back to top">
-        } else {
+  <span class="visually-hidden">Back to top</span>
-            document.getElementById("scroll-to-top").style.display = "none";
+  <svg class="bi icon-sprite" role="img" aria-label="Up Arrow">
-        }
+    <use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#icon-back-to-top"/>
-    }
+  </svg>
-</script>
-<a href="javascript:void(0)" id="scroll-to-top" class="btn btn-link" title="Back to Top">
-    <span class="visually-hidden">Back to top</span>
-    <svg class="bi icon-sprite" role="img" aria-label="Up Arrow">
-        <use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#icon-back-to-top"/>
-    </svg>
 </a>
+
 <script>
-    const scrollBtn = document.getElementById("scroll-to-top");
+(function() {
+  var btn = document.getElementById("scroll-to-top");
+  if (!btn) return;
 
-    window.addEventListener("scroll", function () {
+  function getScrolled() {
-        if (window.scrollY > 500) {
+    return window.scrollY 
-            scrollBtn.style.display = "block";
+      || document.documentElement.scrollTop 
-        } else {
+      || document.body.scrollTop 
-            scrollBtn.style.display = "none";
+      || 0;
-        }
+  }
-    });
 
-    scrollBtn.addEventListener("click", function () {
+  function onScroll() {
-        window.scrollTo({
+    btn.style.display = getScrolled() > 300 ? "block" : "none";
-            top: 0,
+  }
-            left: 0,
+
-            behavior: "smooth"
+  window.addEventListener("scroll", onScroll, { passive: true });
-        });
+  document.addEventListener("scroll", onScroll, { passive: true });
-    });
+  document.body.addEventListener("scroll", onScroll, { passive: true });
+
+  function scrollToTop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    try { window.scrollTo({ top: 0, behavior: "smooth" }); } catch(e) {}
+    try { document.documentElement.scrollTo({ top: 0, behavior: "smooth" }); } catch(e) {}
+    try { document.body.scrollTo({ top: 0, behavior: "smooth" }); } catch(e) {}
+  }
+
+  btn.addEventListener("click", scrollToTop);
+  btn.addEventListener("touchend", scrollToTop, { passive: false });
+
+})();
 </script>

_sass/_custom.scss

@@ -1265,7 +1265,7 @@ figure {
 }
 
 /* ============================================================================
-   SCROLL TO TOP - FULL STYLING (all viewports)
+   SCROLL TO TOP
    ============================================================================ */
 
 #scroll-to-top {
@@ -1273,7 +1273,10 @@ figure {
   bottom: 4.5rem;
   right: 1rem;
   z-index: 9999;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: none;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
 
 #scroll-to-top:hover {