back to top button

_layouts/default.html

@@ -17,8 +17,11 @@
     </div>
 
     {% include analytics.html %}
+    <!-- back to top button --> 
+    <script type="text/javascript" src="{{ site.url }}/{{ site.baseurl }}/assets/js/jquery-3.2.1.min.js"></script>
+    <script src="{{ site.url }}/{{ site.baseurl }}/assets/js/back-to-top.js"></script>
+    <button id="btn-top" class="btn-top" title= "Go to top">&#11165</button>
   </body>
-
   {% if page.toc==true %}
   <script>
     document.getElementById("main").classList.add("withtoc");

assets/js/back-to-top.js

@@ -0,0 +1,16 @@
+$(document).ready(function(){
+    // move down 20px, show the back to top button
+    $(window).scroll(function(){
+        if ($(window).scrollTop() > 20) {
+            $('#btn-top').fadeIn(500);
+        } else {
+            $('#btn-top').fadeOut(500);
+        }
+    });
+
+    // scroll back to top
+    $('#btn-top').click(function(){
+        $('html, body').animate({scrollTop : 0}, 800);
+                return false;
+                });
+});

style.scss

@@ -742,6 +742,35 @@ footer {
   }
 }
 
+
+// Back to Top button 
+.btn-top {
+    display: none; /* hide the button at the beginning */
+    position: fixed; /* Fixed/sticky position */
+    bottom: 20px; /* Place the button at the bottom of the page */ 
+    right: 30px; /* Place the button 30px from the right */ 
+    z-index: 233; /* Make sure it does not overlap */ 
+    border-width: 2px;
+    border-style: solid;
+    border-color: $link-color;
+    background-color: $link-color;
+    color: $white;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%; /* make it round */
+    text-align: center;
+    &:visited {
+      color: $white;
+      border-color: $link-color;
+    }
+    &:hover {
+      background-color: $white;
+      color: $link-color;
+      border-color: $link-color;
+    }  
+
+}
+
 // Settled on moving the import of syntax highlighting to the bottom of the CSS
 // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 @import "highlights";