From 100f98a7ccc5bf41f60e014e59ff24bdd3298f85 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Sat, 18 Apr 2020 02:21:16 +0100
Subject: [PATCH] Added a scroll to top function

---
 _config.yml                  |  1 +
 _includes/footer/custom.html |  3 +++
 assets/css/main.scss         | 41 +++++++++++++++++++++++++++++
 assets/js/scroll-to-top.js   | 50 ++++++++++++++++++++++++++++++++++++
 4 files changed, 95 insertions(+)
 create mode 100644 _includes/footer/custom.html
 create mode 100644 assets/js/scroll-to-top.js

diff --git a/_config.yml b/_config.yml
index 20eb031..e64dd84 100644
--- a/_config.yml
+++ b/_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:
diff --git a/_includes/footer/custom.html b/_includes/footer/custom.html
new file mode 100644
index 0000000..07982a7
--- /dev/null
+++ b/_includes/footer/custom.html
@@ -0,0 +1,3 @@
+<!-- start custom footer snippets -->
+<button id='scroll-to-top'>⏫</button>
+<!-- end custom footer snippets -->
diff --git a/assets/css/main.scss b/assets/css/main.scss
index d174cea..2dd7cda 100644
--- a/assets/css/main.scss
+++ b/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
\ No newline at end of file
diff --git a/assets/js/scroll-to-top.js b/assets/js/scroll-to-top.js
new file mode 100644
index 0000000..16079d5
--- /dev/null
+++ b/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);
\ No newline at end of file