refactor(core): move scroll button JS, CSS

Move inline styles and JavaScript from included
partial backtotopbtn.html to core.css and core.js,
respectively.

apis_core/core/static/css/core.css

@@ -21,3 +21,12 @@ footer a:has(> span[class*="material-symbols"]):hover {
 #modal .modal-dialog {
     max-width: 800px;
 }
+
+/* scroll-to-top button */
+#btn-back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: none;
+    opacity: 0.5;
+}

apis_core/core/static/js/core.js

@@ -5,3 +5,34 @@ $(document).ready(function() {
         enableFiltering: true
     });
 })
+
+window.addEventListener('load', () => {
+    // scroll-to-top button
+
+    //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;
+    }
+})

apis_core/core/templates/partials/backtotopbtn.html

@@ -1,41 +1,5 @@
-<style>
-#btn-back-to-top {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  display: none;
-  opacity: 0.5;
-}
-</style>
 <button type="button"
         class="btn btn-danger btn-floating btn-lg"
         id="btn-back-to-top">
   <span>&uarr;</span>
 </button>
-<script>
-//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;
-}
-</script>