Added Scroll 2 Top Button

tjungbauer · Apr 17, 2020 · 000ac53 · 000ac53
1 parent a9f49f7
commit 000ac53
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/themes/blue/css/screen.css b/themes/blue/css/screen.css
@@ -166,3 +166,23 @@ pre, code, .hljs {
         text-align: left;
     }
 }
+
+#myBtn {
+    display: none; 
+    position: fixed; 
+    bottom: 20px; 
+    right: 30px; 
+    z-index: 99; 
+    border: none;
+    outline: none; 
+    background-color: $copy-button-default;
+    color: $simple-white !important;
+    cursor: pointer; 
+    padding: 15px; 
+    border-radius: 3px; 
+    font-size: 18px; 
+
+    &:hover {
+        background-color: $link_hover;
+    }
+  }
diff --git a/themes/blue/html/base.html b/themes/blue/html/base.html
@@ -17,6 +17,7 @@
     {% style "css/screen.css" %}
 </head>
 <body>
+<button onclick="topFunction()" id="myBtn" class="button fa fa-arrow-up" title="Go to top"></button> 
 
 
 <nav class="navbar navbar-default">
@@ -99,7 +100,20 @@ <h3>Tags</h3>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 {% script "js/highlight.pack.js" %}
 <script>hljs.initHighlightingOnLoad();</script>
+
+{% script "js/scripts.js" %}
+
+<script>window.onload = start;</script>
+
 {% if post.klipse %} {{post.klipse|safe}} {% endif %}
 {% if page.klipse %} {{page.klipse|safe}} {% endif %}
+
+<script>
+  function topFunction() {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+  } 
+</script>
+
 </body>
 </html>
diff --git a/themes/blue/js/scripts.js b/themes/blue/js/scripts.js
@@ -0,0 +1,20 @@
+/* window.onload function */
+function start()
+{
+  scroll2top();
+}
+
+function scroll2top() {
+  mybutton = document.getElementById("myBtn");
+
+  // 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";
+    }
+  }
+}