Fading the "Scroll to Top" button in and out

Previously the "scroll to Top"-button was always shown.
In my opinion this makes little sense when you are already at the top
and may even lead to confusion (nothing happens when you press the button,
when at top).
So this change will fade the button in and out depending on where you are.
It is leveraging the already implemented scrollPage function.

Signed-off-by: Simon Egli <deadolus@gmail.com>

index.html

@@ -287,7 +287,7 @@
     </footer>
 
     <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
-    <div class="scroll-top page-scroll visible-xs visible-sm">
+    <div class="scroll-top page-scroll hidden-sm hidden-xs hidden-lg hidden-md">
         <a class="btn btn-primary" href="#page-top">
             <i class="fa fa-chevron-up"></i>
         </a>

js/cbpAnimatedHeader.js

@@ -28,9 +28,15 @@ var cbpAnimatedHeader = (function() {
 		var sy = scrollY();
 		if ( sy >= changeHeaderOn ) {
 			classie.add( header, 'navbar-shrink' );
-		}
+            $('.scroll-top').removeClass('hidden-sm hidden-xs');
+            $('.scroll-top').fadeIn(500);
+            }
 		else {
 			classie.remove( header, 'navbar-shrink' );
+            $('.scroll-top').fadeOut(500,  function() {
+            $('.scroll-top').addClass('hidden-sm hidden-xs');
+            });
+
 		}
 		didScroll = false;
 	}
@@ -41,4 +47,4 @@ var cbpAnimatedHeader = (function() {
 
 	init();
 
-})();
+})();
\ No newline at end of file