added scroll to top button

UI/Content/base.less

@@ -1,103 +1,122 @@
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
 @import "bootstrap/type";
+@import "../shared/styles/clickable";
 
 .progress {
-  width: 125px;
+  width         : 125px;
-  position: relative;
+  position      : relative;
-  margin-bottom: 2px;
+  margin-bottom : 2px;
   .progressbar-back-text {
-    position: absolute;
+    position   : absolute;
-    width: 100%;
+    width      : 100%;
-    height: 100%;
+    height     : 100%;
-    font-size: 12px;
+    font-size  : 12px;
-    text-align: center;
+    text-align : center;
   }
+
   .progressbar-front-text {
-    display: block;
+    display    : block;
-    width: 125px;
+    width      : 125px;
-    font-size: 12px;
+    font-size  : 12px;
-    text-align: center;
+    text-align : center;
   }
   .bar {
-    position: absolute;
+    position : absolute;
-    overflow: hidden;
+    overflow : hidden;
   }
 }
 
 .backdrop .page {
-  background-color: transparent;
+  background-color : transparent;
-  box-shadow: none;
+  box-shadow       : none;
 }
 
 html {
-  overflow: -moz-scrollbars-vertical;
+  overflow   : -moz-scrollbars-vertical;
-  overflow-y: scroll;
+  overflow-y : scroll;
 }
 
 .input-append {
   .add-on {
-    margin-left: 0;
+    margin-left : 0;
   }
 }
 
 .line &>[class^="icon-"], .line &>[class*=" icon-"] {
-  margin-top: 1em;
+  margin-top  : 1em;
-  height: 1em;
+  height      : 1em;
-  line-height: 1em;
+  line-height : 1em;
 }
 
 #localSeriesLookup {
-  width: 220px;
+  width      : 220px;
-  border: 0px;
+  border     : 0px;
-  background: rgb(75, 75, 75);
+  background : rgb(75, 75, 75);
-  color: rgb(169, 169, 169);
+  color      : rgb(169, 169, 169);
-  padding: 4px;
+  padding    : 4px;
-  font-size: 13px;
+  font-size  : 13px;
 }
 
 #notification-region {
   pre {
-    font-size: 12px;
+    font-size : 12px;
   }
   .alert {
-    margin: 10px;
+    margin : 10px;
   }
   i {
-    padding-right: 10px;
+    padding-right : 10px;
   }
 }
 
 .nz-loading {
   .text-center;
-  font-size: 40px;
+  font-size   : 40px;
-  font-weight: 300;
+  font-weight : 300;
-  padding: 30px;
+  padding     : 30px;
 }
 
 .nz-spinner {
   .text-center;
-  font-size: 56px;
+  font-size : 56px;
-  padding: 30px;
+  padding   : 30px;
 }
 
 .page-toolbar {
-  margin-top: 10px;
+  margin-top    : 10px;
-  margin-bottom: 30px;
+  margin-bottom : 30px;
 }
 
 .page-container {
-  min-height: 600px;
+  min-height : 600px;
 }
 
 button::-moz-focus-inner, a::-moz-focus-inner {
-  border: 0;
+  border : 0;
 }
 
 a:focus {
-  outline: none;
+  outline : none;
 }
 
 .label, .badge {
-  cursor: default;
+  cursor : default;
-}
+}
+
+#scroll-up {
+  &:hover {
+    text-decoration : none;
+    opacity   : 0.4;
+  }
+
+  .clickable;
+  opacity   : 0.2;
+  position  : fixed;
+  bottom    : 50px;
+  right     : 50px;
+  display   : none;
+  font-size : 56px;
+  color     : white;
+
+}

UI/Index.html

@@ -64,6 +64,9 @@
             <div id="modal-region"></div>
         </div>
     </div>
+    <a id="scroll-up" title="Back to the top!">
+        <i class="icon-circle-arrow-up"></i>
+    </a>
 </div>
 <footer>
     <div class="container">

UI/app.js

@@ -32,9 +32,16 @@ require.config({
                 [
                     'Instrumentation/ErrorHandler'
                 ],
-            exports: '$'
+            exports: '$',
-        },
 
+            init: function () {
+                require(
+                    [
+                        'jQuery/ToTheTop'
+                    ]);
+            }
+
+        },
 
         signalR: {
             deps:

UI/jQuery/ToTheTop.js

@@ -0,0 +1,23 @@
+'use strict';
+define(
+    [
+        'bootstrap'
+    ], function () {
+        $(document).ready(function () {
+
+            $(window).scroll(function () {
+                if ($(this).scrollTop() > 100) {
+                    $('#scroll-up').fadeIn();
+                }
+                else {
+                    $('#scroll-up').fadeOut();
+                }
+            });
+
+            $('#scroll-up').click(function () {
+                $("html, body").animate({ scrollTop: 0 }, 600);
+                return false;
+            });
+
+        });
+    });