Skip to content

feat: add back-to-top button to How it Works page - #999

Open
Pranav-IIITM wants to merge 1 commit into
buildpacks:mainfrom
Pranav-IIITM:feat/how-it-works-back-to-top
Open

Pranav-IIITM wants to merge 1 commit into
buildpacks:mainfrom
Pranav-IIITM:feat/how-it-works-back-to-top

Conversation

@Pranav-IIITM

Copy link
Copy Markdown
Contributor

Closes #998

What changed

The How it Works page now has a floating back-to-top button in the bottom-right corner.

  • It appears once the reader scrolls past the hero section and hides again near the top.
  • A pink ring around the button fills smoothly as the reader scrolls, showing how far through the walkthrough they are.
  • Clicking it scrolls smoothly back to the top of the page.
  • It uses the site's blue and pink colours, with a gentle fade-in and a small lift on hover.
  • It's smaller on phones and tablets so it doesn't get in the way of the step cards.
  • It respects the reduced-motion setting and works with the keyboard.

Why

The page is a long scroll-driven walkthrough. Readers who reach the "Try it yourself" and "Dive deeper" sections at the bottom had to scroll all the way back up by hand.
image

@Pranav-IIITM
Pranav-IIITM requested a review from a team as a code owner November 8, 2026 11:37
Add a floating button that appears after the hero section, shows reading
progress with a ring that fills as the page scrolls, and smoothly returns
to the top. It is smaller on phones and tablets and respects reduced motion.

Signed-off-by: Pranav-IIITM <jogdandpranav2007@gmail.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a back-to-top button to the How it Works page

1 participant