Added back to top button.

assets/ts_src/event_listeners.ts

@@ -128,6 +128,28 @@ $(document).on("ajaxUI:start ajaxUI:reload", function () {
 });
 
 
+/**
+ * Register the button, to jump to the top of the page.
+ */
+$(document).on("ajaxUI:start", function registerJumpToTop() {
+    $(window).scroll(function () {
+        if ($(this).scrollTop() > 50) {
+            $('#back-to-top').fadeIn();
+        } else {
+            $('#back-to-top').fadeOut();
+        }
+    });
+    // scroll body to 0px on click
+    $('#back-to-top').click(function () {
+        $('#back-to-top').tooltip('hide');
+        $('body,html').animate({
+            scrollTop: 0
+        }, 800);
+        return false;
+    }).tooltip();
+});
+
+
 //Need for proper body padding, with every navbar height
 $(window).resize(function () {
     let height : number = $('#navbar').height() + 10;

templates/base.html.twig

@@ -262,6 +262,15 @@
             </div>
         </div>
     </div>
+    {
+
+    {# Back to top buton #}
+
+    <!-- Back to top button -->
+    <a id="back-to-top" href="#" class="btn btn-primary back-to-top" data-no-ajax role="button"
+       title="{% trans %}back_to_top{% endtrans %}" data-toggle="tooltip" data-placement="left">
+        <i class="fas fa-angle-up fa-fw"></i>
+    </a>
 
 
 {% endblock %}