Conversation
UcheWendy
left a comment
There was a problem hiding this comment.
Please review changes requested and update as needed. thank you
|
pLEASE PULL LATEST UPDATE FROM MAIN BEFORE PUSHING YOUR CODE FOR PR Revert duplicated header/sidebar blocks in templates/boneset.html. Keep only one #badge, one #sidebar-container, and one #toggle-sidebar. Add the minimal Back-to-Top implementation (HTML button + small CSS block + small JS module), as shown above. Meet acceptance criteria Button is hidden at top. Appears after scrolling down (e.g., 300px). Clicking smoothly returns to top. Disappears again at the top. Accessibility + UX aria-label="Back to top", visible focus state, keyboard activation. Respect prefers-reduced-motion. Sanity checks Run a formatter/linter for CSS and HTML (fix the broken CSS if anything remains after you revert). Test on mobile and desktop; ensure the button doesn’t overlap your footer or floating elements. |
Description
Fixes #144
This PR implements a “Back to Top” button to enhance navigation on long pages.
The button appears when the user scrolls down and smoothly scrolls the page back to the top when clicked.
1. What was Changed
<button id="backToTopBtn">) in the main HTML template (templates/boneset.html).templates/js/BackToTopButton.jsthat:2. Why it was Changed
On long pages, users had to manually scroll back up, which was inconvenient and inconsistent with modern UX expectations. Adding a “Back to Top” button provides a smoother experience, making navigation faster and more user-friendly.
3. How it was Changed
4. Screenshots