OKRS24-235 Fixed 'back to top' button.

Author: dmytrotsko

src/assets/css/style.css

@@ -66,39 +66,6 @@ h6 {
   color: #012970;
 }
 
-/*--------------------------------------------------------------
-# Back to top button
---------------------------------------------------------------*/
-.back-to-top {
-  position: fixed;
-  visibility: hidden;
-  opacity: 0;
-  right: 15px;
-  bottom: 15px;
-  z-index: 99999;
-  background: #4154f1;
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  transition: all 0.4s;
-}
-
-.back-to-top i {
-  font-size: 24px;
-  color: #fff;
-  line-height: 0;
-}
-
-.back-to-top:hover {
-  background: #6776f4;
-  color: #fff;
-}
-
-.back-to-top.active {
-  visibility: visible;
-  opacity: 1;
-}
-
 /*--------------------------------------------------------------
 # Override some default Bootstrap stylings
 --------------------------------------------------------------*/
@@ -1389,3 +1356,10 @@ h6 {
 .filter-description-popover {
     margin-left: 1rem;
 }
+
+#btn-back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: none;
+  }

src/assets/js/back_to_top.js

@@ -0,0 +1,25 @@
+//Get the button
+let mybutton = document.getElementById("btn-back-to-top");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function () {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+// When the user clicks on the button, scroll to the top of the document
+mybutton.addEventListener("click", backToTop);
+
+function backToTop() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}

src/templates/index.html

@@ -146,6 +146,14 @@
             </div>
         </div>
 
+        <button
+        type="button"
+        class="btn btn-danger btn-floating btn-lg"
+        id="btn-back-to-top"
+        >
+            <i class="fas fa-arrow-up"></i>
+        </button>
+
         <footer class="py-3 my-4">
             <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                 <li class="nav-item">
@@ -177,5 +185,7 @@
         <script src="{% static 'floating-scrollbar/jquery.floatingscroll.min.js' %}"></script>
 
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
+
+        <script src="{% static 'js/back_to_top.js' %}"></script>
     </body>
 </html>

src/templates/signals/signals.html

@@ -276,7 +276,7 @@ <h2 class="accordion-header" id="flush-heading_id_signal_availability">
     </div>
     <div class="col-9">
         <form methog="GET" id="orderByForm">
-            <div class="row margin-bottom-1rem d-flex justify-content-end">
+            <div class="row d-flex justify-content-end">
                 <div class="col-6">
                     <div class="input-group mb-3 d-flex justify-content-start">
                         <span class="pt-05">