Skip to content

Feature: Add a "Back to Top" Button #144

@UcheWendy

Description

@UcheWendy

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!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions