-
Notifications
You must be signed in to change notification settings - Fork 8
Description
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:
-
Have a position: fixed to keep it in place while scrolling.
-
Be located in the bottom-right corner of the screen.
-
Be hidden by default (display: none; or opacity: 0;).
-
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.
-
Add a scroll event listener to the window.
-
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.
-
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!