Add a "Back to Top" button that shows up when scrolling up

pradyunsg · Feb 18, 2022 · 7e0f828 · 7e0f828
1 parent 481dade
commit 7e0f828
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/src/furo/assets/scripts/furo.js b/src/furo/assets/scripts/furo.js
@@ -5,6 +5,8 @@ import Gumshoe from "./gumshoe-patched.js";
 ////////////////////////////////////////////////////////////////////////////////
 var tocScroll = null;
 var header = null;
+var lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+const GO_TO_TOP_OFFSET = 64;
 
 function scrollHandlerForHeader() {
   if (Math.floor(header.getBoundingClientRect().top) == 0) {
@@ -14,6 +16,19 @@ function scrollHandlerForHeader() {
   }
 }
 
+function scrollHandlerForBackToTop(positionY) {
+  if (positionY < GO_TO_TOP_OFFSET) {
+    document.documentElement.classList.remove("show-back-to-top");
+  } else {
+    if (positionY < lastScrollTop) {
+      document.documentElement.classList.add("show-back-to-top");
+    } else if (positionY > lastScrollTop) {
+      document.documentElement.classList.remove("show-back-to-top");
+    }
+  }
+  lastScrollTop = positionY;
+}
+
 function scrollHandlerForTOC(positionY) {
   if (tocScroll === null) {
     return;
@@ -48,6 +63,7 @@ function scrollHandlerForTOC(positionY) {
 
 function scrollHandler(positionY) {
   scrollHandlerForHeader();
+  scrollHandlerForBackToTop(positionY);
   scrollHandlerForTOC(positionY);
 }
 

diff --git a/src/furo/assets/styles/_scaffold.sass b/src/furo/assets/styles/_scaffold.sass
@@ -283,6 +283,41 @@ article
       top: 0
       right: 0
 
+////////////////////////////////////////////////////////////////////////////////
+// Back to top
+////////////////////////////////////////////////////////////////////////////////
+.back-to-top
+  text-decoration: none
+
+  display: none
+  position: fixed
+  left: 0
+  top: calc(var(--header-height) + 0.5rem)
+  padding: 0.5rem
+  padding-right: 0.75rem
+  border-radius: 1rem
+  font-size: 0.8125rem
+
+  background: var(--color-background-primary)
+  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), #6b728080 0px 0px 1px 0px
+
+  z-index: 1
+
+  margin-left: 50%
+  transform: translateX(-50%)
+  svg
+    height: 1rem
+    width: 1rem
+    fill: var(--color-foreground-primary)
+    display: inline-block
+
+  span
+    margin-left: 0.25rem
+
+  .show-back-to-top &
+    display: flex
+    align-items: center
+
 ////////////////////////////////////////////////////////////////////////////////
 // Responsive layouting
 ////////////////////////////////////////////////////////////////////////////////

diff --git a/src/furo/theme/furo/page.html b/src/furo/theme/furo/page.html
@@ -60,6 +60,12 @@
   <div class="main">
     <div class="content">
       <div class="article-container">
+        <a href="#" class="back-to-top">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"></path>
+          </svg>
+          <span>{% trans %}Back to top{% endtrans %}</span>
+        </a>
         <div class="content-icon-container">
           {#- Edit this page, on GitHub -#}
           {%- if READTHEDOCS and conf_py_path and page_source_suffix and github_user != "None" and github_repo != "None" and github_version %}