Merge pull request #17 from rbhatia46/master

Integrate back to top button

static/css/style.css

@@ -68,6 +68,48 @@ header .logo h1 a {
   color: #fff;
 }
 
+#return-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: rgb(0, 0, 0);
+  background: rgba(0, 0, 0, 0.7);
+  width: 50px;
+  height: 50px;
+  z-index: 9999;
+  display: block;
+  text-decoration: none;
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  border-radius: 35px;
+  display: none;
+  -webkit-transition: all 0.3s linear;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+#return-to-top i {
+  color: #fff;
+  margin: 0;
+  position: relative;
+  left: 16px;
+  top: 13px;
+  font-size: 19px;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+#return-to-top:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+#return-to-top:hover i {
+  color: #fff;
+}
+
+
 /* header .logo h1 a:hover {
   color: #ccc;
 } */

static/js/scripts.js

@@ -594,3 +594,17 @@ function onDOMContentLoaded(){
 }
 
 document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
+
+// ===== Scroll to Top Button ==== 
+$(window).scroll(function() {
+    if ($(this).scrollTop() >= 100) {        // If page is scrolled more than 100px
+        $('#return-to-top').fadeIn(200);    // Fade in the arrow
+    } else {
+        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
+    }
+});
+$('#return-to-top').click(function() {      // When arrow is clicked
+    $('body,html').animate({
+        scrollTop : 0                       // Scroll to top of body
+    }, 500);
+});

templates/base.html

@@ -50,6 +50,9 @@ <h1><a href="/"> NLPBuddy - Open Source Text Analysis Tool</a></h1>
         </div>
     </header>
 
+    <!-- Return to top Arrow -->
+    <a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>
+
     {% block content %}
 
     {% endblock %}