Added a scroll to top function

_config.yml

@@ -45,6 +45,7 @@ breadcrumb_separator  : ">"
 words_per_minute         : 200
 head_scripts: 
   - /assets/js/progress.js
+  - /assets/js/scroll-to-top.js
 comments:
   provider               : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "utterances", "custom"
   disqus:

_includes/footer/custom.html

@@ -0,0 +1,3 @@
+<!-- start custom footer snippets -->
+<button id='scroll-to-top'>⏫</button>
+<!-- end custom footer snippets -->

assets/css/main.scss

@@ -82,6 +82,47 @@ $base0f: #926e5c;
   z-index: 1;
 }
 
+// Scroll to top
+#scroll-to-top {
+  background: black;
+ display:block;
+ position:fixed;
+ font-size:25px;
+ bottom:25px;
+ right:10%;
+ opacity:0;
+ z-index:99;
+ text-align:center;
+ transform:translateY(30%);
+ transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
+}
+@media (max-width: 600px) {
+ #scroll-to-top {
+  font-size:20px
+ }
+}
+@media (max-width: 600px) {
+ #scroll-to-top {
+  right:5%;
+  bottom:15px
+ }
+}
+#scroll-to-top :last-child {
+ transition:transform 0.7s ease-in-out
+}
+#scroll-to-top :last-child:active,
+#scroll-to-top :last-child:hover {
+ transform:translateY(-10%)
+}
+#scroll-to-top span {
+ cursor:pointer;
+ color:#1a1d24
+}
+#scroll-to-top span:hover .up-arrow,
+#scroll-to-top span:active .up-arrow {
+ color:#00adb5
+}
+
 //@import "progress.css"; // for progress bar
 @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
 @import "minimal-mistakes"; // main partials

assets/js/scroll-to-top.js

@@ -0,0 +1,50 @@
+function hasScrollBehavior() {
+    return 'scrollBehavior' in document.documentElement.style;
+  }
+  
+  function smoothScroll() {
+    var currentY = window.scrollY;
+    var int = setInterval(function () {
+      window.scrollTo(0, currentY);
+  
+      if (currentY > 500) {
+        currentY -= 70;
+      } else if (currentY > 100) {
+        currentY -= 50;
+      } else {
+        currentY -= 10;
+      }
+  
+      if (currentY <= 0) clearInterval(int);
+    }, 1000 / 60); // 60fps
+  }
+  
+  function scrollToTop() {
+    // document.getElementById('page-title').scrollIntoView({behavior: 'smooth'});
+    if (hasScrollBehavior()) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      smoothScroll();
+    }
+  }
+  
+  function toggleScrollUpButton() {
+    var y = window.scrollY;
+    var e = document.getElementById('scroll-to-top');
+    if (y >= 350) {
+      e.style.transform = 'translateY(-30%)'
+      e.style.opacity = 1;
+    } else {
+      e.style.opacity = 0;
+      e.style.transform = 'translateY(30%)'
+    }
+  }
+  
+  document.addEventListener("DOMContentLoaded", function () {
+    document.removeEventListener("DOMContentLoaded", arguments.callee, false);
+  
+    window.addEventListener("scroll", toggleScrollUpButton);
+  
+    var e = document.getElementById('scroll-to-top');
+    e.addEventListener('click', scrollToTop, false);
+  }, false);