<a href="#" 
   id="scroll-to-top" 
   class="btn btn-link" 
   title="Back to Top"
   aria-label="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>
(function() {
  var btn = document.getElementById("scroll-to-top");
  if (!btn) return;

  function getScrolled() {
    return window.scrollY 
      || document.documentElement.scrollTop 
      || document.body.scrollTop 
      || 0;
  }

  function onScroll() {
    btn.style.display = getScrolled() > 300 ? "block" : "none";
  }

  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>