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
I would be happy to work on this enhancement issue 😁.
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:
Implementation Details
base.htmlaria-labelBenefits
I would be happy to work on this enhancement issue 😁.