diff --git a/assets/controllers/common/back_to_top_controller.js b/assets/controllers/common/back_to_top_controller.js
new file mode 100644
index 00000000..334b9126
--- /dev/null
+++ b/assets/controllers/common/back_to_top_controller.js
@@ -0,0 +1,27 @@
+import {Controller} from "@hotwired/stimulus";
+import {Tooltip} from "bootstrap";
+
+export default class extends Controller {
+
+    connect() {
+        window.addEventListener('scroll', this._onscroll.bind(this));
+    }
+
+    _onscroll() {
+        const button = this.element;
+
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            button.style.display = "block";
+        } else {
+            button.style.display = "none";
+        }
+    }
+
+    backToTop() {
+        //Hide button tooltip to prevent ugly tooltip on scroll
+        Tooltip.getInstance(this.element)?.hide();
+
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    }
+}
\ No newline at end of file
diff --git a/assets/js/register_events.js b/assets/js/register_events.js
index 4fbc70a1..116a1d7c 100644
--- a/assets/js/register_events.js
+++ b/assets/js/register_events.js
@@ -7,13 +7,9 @@ import "bootstrap-fileinput/css/fileinput.css"
 
 import "bootstrap-fileinput";
 
-import {Popover} from "bootstrap";
-
-
 class RegisterEventHelper {
     constructor() {
         this.registerTooltips();
-        this.registerJumpToTopBtn();
         this.registerFileInput();
 
         this.registerSpecialCharInput();
@@ -39,26 +35,6 @@ class RegisterEventHelper {
         });
     }
 
-    registerJumpToTopBtn() {
-        this.registerLoadHandler(() => {
-            $(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();
-        });
-    }
-
     registerSpecialCharInput() {
         this.registerLoadHandler(() => {
             //@ts-ignore
diff --git a/templates/base.html.twig b/templates/base.html.twig
index ea5878c8..6cbde30f 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -107,10 +107,10 @@
     {# Back to top buton #}
 
     <!-- Back to top button -->
-    <a id="back-to-top" href="#" class="btn btn-primary back-to-top" role="button"
-       title="{% trans %}back_to_top{% endtrans %}" data-bs-toggle="tooltip" data-placement="left">
+    <button id="back-to-top" class="btn btn-primary back-to-top" role="button" title="{% trans %}back_to_top{% endtrans %}"
+            {{ stimulus_controller('common/back_to_top') }} {{ stimulus_action('common/back_to_top', 'backToTop') }}>
         <i class="fas fa-angle-up fa-fw"></i>
-    </a>
+    </button>
 
 {% endblock %}