Enhancement: Add Back-to-Top button for improved navigation on long pages #975
Description
Problem
Several pages such as course descriptions, blog posts, forums, and virtual labs can become quite long. Users currently need to manually scroll back to the top to access navigation elements.
This negatively impacts usability, especially on mobile devices and smaller screens.
Proposed Solution
Introduce a reusable "Back to Top" floating button that:
- Appears after scrolling past a threshold
- Smoothly scrolls the page back to the top
- Remains accessible and unobtrusive
- Works across all pages via the base template
Implementation Details
- Added button component to
base.html - Uses Tailwind utility classes for styling and transitions
- Visibility controlled via scroll event listener
- Smooth scrolling behavior implemented
- Accessible with
aria-label
Benefits
- Improved navigation UX
- Better accessibility
- Consistent experience across long pages
- Minimal performance overhead