Skip to content

feat: Add a "Back to Top" floating action buttonΒ #502

Description

@Papia-tech

✨ Feature Description

Add a minimal, floating "Back to Top" button that appears in the bottom-right corner when a user scrolls down the page.

πŸ€” Problem It Solves

Long-scrolling landing pages force users to manually scroll all the way up to access the navigation bar, reducing accessibility and user experience efficiency.

πŸ’‘ Proposed Solution

  • Implement a floating action button (position: fixed) in the bottom-right.
  • Use a scroll listener to dynamically toggle its visibility (e.g., fade in after scrolling down 300px).
  • Trigger a smooth scroll animation back to the top (behavior: 'smooth') upon clicking.
  • Style it with a dark theme and red accent hover state to match the existing UI design.

βœ… Acceptance Criteria

  • Button remains hidden at the absolute top of the page.
  • Button becomes visible smoothly after scrolling down the page.
  • Clicking the button returns the user to the top with a smooth scrolling transition.
  • Design matches the dark and red accent aesthetic of the application.

πŸ“‹ Additional Context

I would love to open a PR for this! Please assign it to me.

🌱 Contributor Checklist

  • I am participating via GSSoC
  • I have read the contribution guidelines
  • I checked for existing issues before creating this

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions