Added a button to take user to top when page is scrolled down (closes #…

…108)

* Added a button to take user to top when page is scrolled down

* Updated util.js

1. String made to single quotes.
2. Used a var for transition time.
3. Length of 140 chars reduced.

* Removed the flickering of button

* Added space after comment

* Removed trailing space

* Changes made as discussed

* Removed the fadeIn and fadeOut effect and made changes as discussed

* Removed the fadeIn and fadeOut effect and made changes as discussed

* Added a button to take user to top when page is scrolled down

* Updated util.js

1. String made to single quotes.
2. Used a var for transition time.
3. Length of 140 chars reduced.

* Removed the flickering of button

* Added space after comment

* Removed trailing space

* Changes made as discussed

* Removed the fadeIn and fadeOut effect and made changes as discussed

* Removed the fadeIn and fadeOut effect and made changes as discussed

* Changes as per the request changes thread

* Removed trailing space in util.js

* Removed extra line in util.js

* Removed .DS_Store finally

* Changed variable name of AMOUNT_SCROLLED

* Variable name changed

* Removed .DS_Store from .gitignore

* Modified var name to BACK_TO_TOP_ACTIVATION_HEIGHT

* Removed extra line in .gitignore

* Change primary to default button for goToTop button

* Change opacity to 0.5

* Add method chaining for removeClass and addClass for backToTop button

* Add indentation at chaining methods

* Add classes hidden-xs and -sm to html element, modify JS

* Refactor logic for button display

* Modify logic with toggleClass

* Remove display: none for backToTop as we add hide class on load

assets/css/style.css

@@ -74,6 +74,22 @@ html[dir=rtl] .clearButton {
     left: 18px;
 }
 
+#backToTop {
+    position: fixed;
+    z-index: 999;
+    right: 20px;
+    bottom: 20px;
+    opacity: 0.5;
+}
+
+#backToTop:hover {
+    opacity: 1;
+}
+
+#backToTop .fa-arrow-up {
+    color: white;
+}
+
 /* Navbar */
 
 .apertiumBox {

assets/js/util.js

@@ -7,7 +7,7 @@ var SPACE_KEY_CODE = 32, ENTER_KEY_CODE = 13,
     HTTP_OK_CODE = 200, HTTP_BAD_REQUEST_CODE = 400,
     XHR_LOADING = 3, XHR_DONE = 4;
 
-var TEXTAREA_AUTO_RESIZE_MINIMUM_WIDTH = 768;
+var TEXTAREA_AUTO_RESIZE_MINIMUM_WIDTH = 768, BACK_TO_TOP_ACTIVATION_HEIGHT = 300;
 
 function ajaxSend() {
     $('#loadingIndicator').show();
@@ -119,6 +119,19 @@ $(document).ready(function () {
     $('.modal').on('hide.bs.modal', function () {
         $('a[data-target=#' + $(this).attr('id') + ']').parents('li').removeClass('active');
     });
+
+    $('#backToTop').addClass('hide');
+    $(window).scroll(function () {
+        $('#backToTop').toggleClass('hide', $(window).scrollTop() < BACK_TO_TOP_ACTIVATION_HEIGHT);
+    });
+
+    $('#backToTop').click(function () {
+        $('html, body').animate({
+            scrollTop: 0
+        }, 'fast');
+        return false;
+    });
+
 });
 
 if(config.PIWIK_SITEID && config.PIWIK_URL) {

index.html.in

@@ -531,5 +531,6 @@
             <div class="lead text-warning well well-sm" data-text="Enable_JS_Warning"></div>
             <noscript><p><img src="@include_piwik_url@/piwik.php?idsite=@include_piwik_siteid@" style="border: 0;" alt=""></p></noscript>
         </div>
+        <button class="btn btn-default hidden-sm hidden-xs" id="backToTop"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
     </body>
 </html>