added scroll to top button

UI/Content/base.less

@@ -1,6 +1,7 @@
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
 @import "bootstrap/type";
+@import "../shared/styles/clickable";
 
 .progress {
   width         : 125px;
@@ -13,6 +14,7 @@
     font-size  : 12px;
     text-align : center;
   }
+
   .progressbar-front-text {
     display    : block;
     width      : 125px;
@@ -101,3 +103,20 @@ a:focus {
 .label, .badge {
   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;
+            });
+
+        });
+    });