On long pages (models leaderboard, feed, model detail) there's no way to quickly return to the top without scrolling manually.
Expected behaviour:
Button appears in the bottom-right corner after scrolling down 400px
Smooth scrolls to the top on click
Fades in/out with a transition
Accessible: has aria-label="Back to top"
Implementation: Use useEffect with a scroll event listener — no library needed.
Files to create/touch:
New component:
BackToTop.tsx
layout.tsx
— add the component globally
Acceptance criteria:
Button hidden until user scrolls 400px
Smooth scroll to top on click
Fade in/out animation
Keyboard accessible and has aria-label
Works on mobile
On long pages (models leaderboard, feed, model detail) there's no way to quickly return to the top without scrolling manually.
Expected behaviour:
Button appears in the bottom-right corner after scrolling down 400px
Smooth scrolls to the top on click
Fades in/out with a transition
Accessible: has aria-label="Back to top"
Implementation: Use useEffect with a scroll event listener — no library needed.
Files to create/touch:
New component:
BackToTop.tsx
layout.tsx
— add the component globally
Acceptance criteria:
Button hidden until user scrolls 400px
Smooth scroll to top on click
Fade in/out animation
Keyboard accessible and has aria-label
Works on mobile