add feature: back to top button

boneset-api/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.8.4",
     "cors": "^2.8.5",
+    "digitalbonesbox": "file:..",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
     "express-rate-limit": "^8.1.0"

templates/boneset.html

@@ -84,11 +84,15 @@ <h3>Description</h3>
                 <div id="annotations-overlay"></div>
             </div>
         </div>
+        <button id="backToTopBtn">
+            <img src="../assets/backToTop.png" alt="Back to Top" width="50px" height="50px">
+        </button>
     </div>
 
     <script type="module" src="js/search.js"></script>
     <script type="module" src="js/sidebar.js"></script>
     <script type="module" src="js/main.js"></script>
+    <script type="module" src="js/BackToTopButton.js"></script>
 </body>
 
 </html>

templates/js/BackToTopButton.js

@@ -0,0 +1,16 @@
+const backToTopBtn = document.getElementById('backToTopBtn')
+
+window.addEventListener('scroll', () => {
+  if (document.documentElement.scrollTop > 20) {
+    backToTopBtn.classList.add('show')
+  } else {
+    backToTopBtn.classList.remove('show')
+  }
+})
+
+backToTopBtn.addEventListener('click', () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+})

templates/style.css

@@ -445,3 +445,29 @@ ul li {
     }
 }
 
+
+/* Back To Top */
+
+#backToTopBtn {
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 10px;
+  transition: opacity 0.3s ease, bottom 0.3s ease;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+#backToTopBtn.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#backToTopBtn:hover {
+  bottom: 15px;
+}