Add back to top button

assets/css/bobastyle.css

@@ -245,6 +245,17 @@ footer {
   text-align: center;
 }
 
+#back-to-top {
+  position: fixed;
+  float: right;
+  bottom: 25px;
+  right: 25px;
+  background-color: var(--background-3);
+  border-radius: 100%;
+  padding: 12px;
+  display: none;
+}
+
 
 
 /* Navbar formatting */
@@ -319,6 +330,16 @@ footer {
 
 
 /* Basic elements */
+html {
+  scroll-behavior: smooth;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
 body {
   background-color: var(--background);
   color: var(--text-normal);

assets/js/back-to-top.js

@@ -0,0 +1,8 @@
+const backToTop = document.getElementById("back-to-top");
+window.onscroll = function() {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        backToTop.style.display = "block";
+    } else {
+        backToTop.style.display = "none";
+    }
+}