Scroll to the top button on the right corner #2103
Description
Use case
When navigating long pages such as exercise lists, nutrition diaries, or workout history, users often have to manually scroll back up to reach the top navigation or perform new actions. This becomes inconvenient on smaller screens or lengthy lists.
Proposal
Add a “Scroll to Top” button (⬆️) fixed to the bottom-right corner of the screen.
When clicked, it smoothly scrolls the page to the top.
Suggested behavior:
- Only visible after scrolling down a certain distance.
- Uses a fade-in / fade-out transition for smooth UX.
- Can be implemented using a simple JavaScript/React hook or CSS scroll-behavior: smooth.
Why this feature is needed
- Improves usability on mobile and desktop devices.
- Reduces repetitive manual scrolling.
- Aligns with modern UI/UX design seen in many dashboard-style web apps.
Additional Context
- Example: GitHub and Medium both implement similar scroll-to-top buttons.
- Could use an upward arrow icon (↑) or floating action button (FAB) style.
- Optional enhancement: animate only after the user scrolls past 400–600px.