feat: add a scroll to top btn (#1332)

* feat: add a back to top btn

* style: improve back to top btn

* style: use on background instead

* Update src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

Co-authored-by: Tania Allard <[email protected]>

* Update src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

Co-authored-by: Tania Allard <[email protected]>

* Update src/pydata_sphinx_theme/assets/styles/base/_base.scss

* Update src/pydata_sphinx_theme/assets/styles/base/_base.scss

* fix: move btn to the bottom and make it blue

* fix: use secondary colors

---------

Co-authored-by: Tania Allard <[email protected]>

Author: 12rambau

src/pydata_sphinx_theme/assets/scripts/bootstrap.js

@@ -21,8 +21,36 @@ function TriggerTooltip() {
   });
 }
 
+/*******************************************************************************
+ * back to top button
+ */
+function backToTop() {
+  var btn = document.getElementById("pst-back-to-top");
+  btn.addEventListener("click", function () {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  });
+}
+
+function showBackToTop() {
+  var btn = document.getElementById("pst-back-to-top");
+  var header = document
+    .getElementsByClassName("bd-header")[0]
+    .getBoundingClientRect();
+  window.addEventListener("scroll", function () {
+    if (this.oldScroll > this.scrollY && this.scrollY > header.bottom) {
+      btn.style.display = "block";
+    } else {
+      btn.style.display = "none";
+    }
+    this.oldScroll = this.scrollY;
+  });
+}
+
 /*******************************************************************************
  * Call functions after document loading.
  */
 
 documentReady(TriggerTooltip);
+documentReady(backToTop);
+documentReady(showBackToTop);

src/pydata_sphinx_theme/assets/styles/base/_base.scss

@@ -166,3 +166,16 @@ pre {
     padding-right: 10px;
   }
 }
+
+// the back to top btn
+#pst-back-to-top {
+  z-index: $zindex-tooltip;
+  position: fixed;
+  display: none;
+  top: 80vh;
+  left: 50vw;
+  transform: translate(-50%);
+  color: var(--pst-color-secondary-text);
+  background-color: var(--pst-color-secondary);
+  border: none;
+}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -52,6 +52,15 @@
 {%- endblock %}
 
 {%- block content %}
+  {# A tiny helper pixel to detect if we've scrolled #}
+  <div id="pst-scroll-pixel-helper"></div>
+
+  {# the scroll to top button #}
+  <button type="button" class="btn rounded-pill" id="pst-back-to-top">
+    <i class="fa-solid fa-arrow-up"></i>
+    {{ _("Back to top") }}
+  </button>
+
   {# checkbox to toggle primary sidebar #}
   <input type="checkbox"
           class="sidebar-toggle"