Description
Problem
The page is long, and users currently have to manually scroll back to the top after reaching the footer. This creates unnecessary effort and negatively impacts the overall navigation experience.
Expected Behavior
Add a floating Scroll-to-Top button that:
- Appears after the user scrolls down a certain distance (e.g., 300–500px).
- Smoothly scrolls the page back to the top when clicked.
- Stays fixed in the bottom-right corner without obstructing other UI elements.
- Is keyboard accessible and includes an appropriate
aria-label.
- Matches the application's existing design and theme.
Current Behavior
There is no quick way to return to the top of the page, requiring users to manually scroll through the entire page.
Suggested Solution
- Add a floating action button using
position: fixed.
- Toggle its visibility based on the user's scroll position.
- Use smooth scrolling (
window.scrollTo({ top: 0, behavior: "smooth" })).
- Ensure responsive placement on both desktop and mobile devices.
Screenshot
The screenshot below shows the footer section, where the lack of a scroll-to-top button becomes noticeable.
Description
Problem
The page is long, and users currently have to manually scroll back to the top after reaching the footer. This creates unnecessary effort and negatively impacts the overall navigation experience.
Expected Behavior
Add a floating Scroll-to-Top button that:
aria-label.Current Behavior
There is no quick way to return to the top of the page, requiring users to manually scroll through the entire page.
Suggested Solution
position: fixed.window.scrollTo({ top: 0, behavior: "smooth" })).Screenshot
The screenshot below shows the footer section, where the lack of a scroll-to-top button becomes noticeable.