Merge pull request #121 from ankurMalhotra/gh-pages

Add 'back to top' link when scrolling through facilities list #53

Author: eeeschwartz

index.html

@@ -62,6 +62,7 @@
       <div class="tab-content">
         <div id="facets" class="tab-pane control control-survey active"></div>
         <div id="list" class="tab-pane control control-sidebar"></div>
+          <a href="#" id="back-to-top">Back to top</a>
       </div>
       <div id="map" style="display:none"></div>
     </div>

src/script.js

@@ -48,6 +48,8 @@ define(function(require) {
   require('ui/loading').attachTo('#loading');
   require('ui/filtering').attachTo('#message');
   require('ui/feedback_widget').attachTo('#feedback-modal');
+  require('ui/back-to-top').attachTo('#back-to-top');
+  require('ui/scroll').attachTo(document);
   require('ui/project').attachTo(document);
   require('data/facet').attachTo(document);
   require('data/search').attachTo(document);

src/ui/back-to-top.js

@@ -0,0 +1,18 @@
+define(function(require, exports, module) {
+  'use strict';
+  var flight = require('flight');
+  var $ = require('jquery');
+
+  module.exports = flight.component(function() {
+    this.onClick = function() {
+      $('body,html').animate({
+        scrollTop: 0
+      }, 1000);
+      return false;
+    };
+
+    this.after('initialize', function() {
+      this.on('click', this.onClick);
+    });
+  });
+});

src/ui/scroll.js

@@ -0,0 +1,20 @@
+define(function(require, exports, module) {
+  'use strict';
+  var flight = require('flight');
+  var $ = require('jquery');
+
+  module.exports = flight.component(function() {
+
+    this.onScroll = function() {
+      if (this.$node.scrollTop() >= 500) {
+        $('#back-to-top').fadeIn(500);
+      } else {
+        $('#back-to-top').fadeOut(500);
+      }
+    };
+
+    this.after('initialize', function() {
+      this.on('scroll', this.onScroll);
+    });
+  });
+});

styles/style.css

@@ -362,6 +362,21 @@ body > div.container {
   z-index: 999999999;
 }
 
+#back-to-top {
+  text-decoration: none;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  display: none;
+  background: rgba(37, 170, 225, 0.8);
+  color: #fff;
+  padding: 4px 7px;
+  font-size: 1.3em;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  z-index: 999999999;
+}
+
 #feedback-form textarea {
   margin-bottom: 20px;
 }