diff --git a/src/pydata_sphinx_theme/assets/scripts/bootstrap.js b/src/pydata_sphinx_theme/assets/scripts/bootstrap.js index 0238f64d9..ec34c0d4e 100644 --- a/src/pydata_sphinx_theme/assets/scripts/bootstrap.js +++ b/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); diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss index a66e3d6ef..33b1e39c6 100644 --- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -177,3 +177,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; +} diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html index 5db9067dd..12adfdd22 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html +++ b/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 #} +
+ + {# the scroll to top button #} + + {# checkbox to toggle primary sidebar #}