Merge pull request #117 from juliengk/scroll-top

Add scroll to top button

puppetboard/static/css/puppetboard.css

@@ -57,19 +57,64 @@ th.tablesorter-headerDesc::after {
 }
 
 .ui.menu.darkblue {
-  background-color:#2C3E50;
+  background-color: #2C3E50;
 }
 
 .ui.darkblue.header, i.darkblue {
-  color:#2C3E50;
+  color: #2C3E50;
 }
 
 .ui.labels .darkblue.label::before, .ui.darkblue.labels .label::before, .ui.darkblue.label::before {
-  background-color:#2C3E50;
+  background-color: #2C3E50;
 }
 
 .ui.darkblue.labels .label, .ui.darkblue.label {
-  background-color:#2C3E50;
+  background-color: #2C3E50;
-  border-color:#2C3E50;
+  border-color: #2C3E50;
-  color:#FFF;
+  color: #FFF;
+}
+
+#scroll-btn-top {
+  position: fixed;
+  overflow: hidden;
+  z-index: 99999999;
+  opacity: 0;
+  visibility: hidden;
+  width: 50px;
+  height: 48px;
+  line-height: 48px;
+  right: 30px;
+  bottom: 85px;
+  padding-top: 2px;
+  background-color: #777777;
+  text-align: center;
+  color: #EEE;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+}
+
+#scroll-btn-top:hover {
+  background-color: #888;
+}
+
+#scroll-btn-top.show {
+  visibility: visible;
+  cursor: pointer;
+  opacity: 1.0;
+}
+
+#scroll-btn-top i {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  margin-right: -50%;
+  transform: translate(-50%, -50%)
 }

puppetboard/static/js/scroll.top.js

@@ -0,0 +1,13 @@
+jQuery(function($) {
+  $(document).scroll(function() {
+    if ( $(window).scrollTop() > 100 ) {
+      $('#scroll-btn-top').addClass('show');
+    } else {
+      $('#scroll-btn-top').removeClass('show');
+    }
+  });
+
+  $('#scroll-btn-top').click(function() {
+    $('html, body').animate( { scrollTop: 0 }, 500 );
+  });
+});

puppetboard/templates/layout.html

@@ -47,6 +47,10 @@
       <div class="one wide column"></div>
     </div>
 
+    <div id="scroll-btn-top">
+      <i class="large arrow up icon"></i>
+    </div>
+
     <footer class="ui absolute fixed bottom">
       <div>
       Copyright © 2013-2014 <a href="https://github.com/daenney">Daniele Sluijters</a>. <span style="float:right">Live from PuppetDB.</span>
@@ -73,6 +77,7 @@
     {% endif %}
     <script src="{{url_for('static', filename='js/lists.js')}}"></script>
     <script src="{{url_for('static', filename='js/tables.js')}}"></script>
+    <script src="{{url_for('static', filename='js/scroll.top.js')}}"></script>
 
     {% block script %} {% endblock script %}
   </body>