Feature: Add a "Back to Top" Button

Goal / Objective

To improve the user experience on long pages, we want to add a "Back to Top" button. This button will appear when the user scrolls down the page and, when clicked, will smoothly scroll them back to the top.

This is a great task for a new contributor as it involves a small amount of HTML, CSS, and JavaScript and doesn't require a deep understanding of the application's data flow.

Tasks to be Completed

Add the Button to the HTML:

In templates/boneset.html, add a new button tag or "a" element for the "Back to Top" feature. A good place for it would be just before the closing /body tag. Give it a clear ID, like back-to-top-btn.

Style the Button in CSS:

In templates/style.css, add styles for the new button. It should:

1. Have a position: fixed to keep it in place while scrolling.

2. Be located in the bottom-right corner of the screen.

3. Be hidden by default (display: none; or opacity: 0;).

4. Have a simple, clean design (e.g., an up-arrow icon 🔼).

Implement the JavaScript Logic:

In templates/js/main.js (or a new .js file called back-to-top button), add a new function to handle the button's behavior.

1. Add a scroll event listener to the window.

2. Inside the listener, check the scroll position (window.scrollY). If the user has scrolled down more than a certain amount (e.g., 300px), make the button visible. Otherwise, hide it.

3. Add a click event listener to the button. When clicked, it should scroll the window back to the top smoothly (window.scrollTo({ top: 0, behavior: 'smooth' });).

Acceptance Criteria
[ ] The "Back to Top" button is not visible when the user is at the top of the page.

[ ] The button appears (e.g., fades in) in the bottom-right corner after the user has scrolled down the page.

[ ] Clicking the button smoothly scrolls the user back to the top of the page.

[ ] The button disappears again when the user is back at the top.

Additional Context

This feature is purely a UI enhancement and should not affect any of the existing data-loading or viewer logic. Good luck, and feel free to ask any questions in the comments!

Start with templates/boneset.html, templates/style.css, and templates/js/main.js to understand the page structure and existing UI behavior. Add the button, fixed bottom-right styling, scroll visibility logic, and smooth return-to-top behavior described in the acceptance criteria. Verify manually that it stays hidden at the top, appears after scrolling, scrolls smoothly when clicked, and hides again at the top.