Add back to top button

jasalt · jasalt · commit ee6b13d9e32a · 2024-12-29T16:07:18.000+02:00
Uses theme colors and border radius from search-box, otherwise copy paste from: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
diff --git a/sass/site.scss b/sass/site.scss
@@ -13,7 +13,27 @@
 @import 'post-list';
 
 body {
-    padding-top: $header-height;
+  padding-top: $header-height;
+
+  #back-to-top-button {
+	display: none;
+	position: fixed;
+	bottom: 20px;
+	right: 30px;
+	z-index: 99;
+	border: none;
+	outline: none;
+	background-color: $color-base-primary;
+	color: $color-text-inverted;
+	cursor: pointer;
+	padding: 15px;
+	border-radius: 2px;
+	font-size: 18px;
+
+	&:hover {
+	  background-color: $color-base-hover;
+	}
+  }
 }
 
 footer {
diff --git a/static/back_to_top.js b/static/back_to_top.js
@@ -0,0 +1,19 @@
+// Get the button:
+let mybutton = document.getElementById("back-to-top-button");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function backToTop() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
diff --git a/templates/base.html b/templates/base.html
@@ -29,9 +29,12 @@
 <body>
   {% block body %} {% endblock %}
 
+  <button onclick="backToTop()" id="back-to-top-button" title="Go to top">Top</button>
+
   <script type="text/javascript" src="{{ get_url(path='elasticlunr.min.js') }}" defer></script>
   <script type="text/javascript" src="{{ get_url(path='api_search.js') }}" defer></script>
   <script type="text/javascript" src="{{ get_url(path='search.js') }}" defer></script>
+  <script type="text/javascript" src="{{ get_url(path='back_to_top.js') }}" defer></script>
 </body>
 
 </html>
