Merge pull request #92 from Emuohwo/scroll-btn

Add scroll to top button to web page
intermine · Mar 24, 2020 · 2d7210b · 2d7210b
2 parents cde544b + 7a3cdcf
commit 2d7210b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 deletions.
diff --git a/src/js/common.js b/src/js/common.js
@@ -1,5 +1,21 @@
 $(document).ready(function() {
     initializeStartupConfiguration();
+
+    // Scroll to Top button script
+    $(window).scroll(function() {
+        if ($(this).scrollTop() > 200) {
+            $('#scrollToTopBtn').fadeIn();
+        } else {
+            $('#scrollToTopBtn').fadeOut();
+        }
+    });
+
+    $('#scrollToTopBtn').click(function() {
+        $('body, html').animate({
+            scrollTop: 0
+        }, 800);
+        return false;
+    })
 });
 
 /**

diff --git a/src/scss/_global.scss b/src/scss/_global.scss
@@ -118,35 +118,29 @@ body.fixed-nav {
   padding-top: 1rem;
 }
 
-// Scroll to top button
-.scroll-to-top {
-  position: fixed;
-  right: 15px;
-  bottom: 3px;
-
-  display: none;
-
-  width: 50px;
-  height: 50px;
 
-  text-align: center;
 
-  color: white;
-  background: fade-out($gray-800, .5);
+// Scroll to Top Button
+#scrollToTopBtn {
+  position: fixed;
+  right: 30px;
+  bottom: 50px;
+  padding: 4px 8px;
+  background-color: #0044cc;
+  color: #fff;
+  opacity: 0.5;
+  display: none;
+  z-index: 9;
 
-  line-height: 45px;
-  &:focus,
   &:hover {
-    color: white;
-  }
-  &:hover {
-    background: $gray-800;
-  }
-  i {
-    font-weight: 800;
+    opacity: 1;
   }
 }
 
+@media (max-width: 785px){
+  #scrollToTopBtn{bottom: 75px;}
+}
+
 .ui-state-active a,
 .ui-state-active a:link,
 .ui-state-active a:visited {

diff --git a/views/includes/footer.pug b/views/includes/footer.pug
@@ -8,3 +8,6 @@ footer.sticky-footer
 		a(href='http://intermine.org/' target='_blank') InterMine
 		|  &amp; 
 		a(href='http://cam.ac.uk/' target='_blank') University of Cambridge
+	#scrollBtnWrapper
+		a#scrollToTopBtn.btn.scrollToTopBtn(href='#' role='button') 
+			i.fa.fa-chevron-up