Skip to content

[FEAT] Add floating "Scroll to Top" button on Dashboard #2509

@Rashi1404

Description

@Rashi1404

Problem Statement

As a user, I want a quick way to return to the top of the Dashboard after scrolling through multiple widgets (commit chart, PR analytics, goals, streak tracker, etc.) so that I can navigate efficiently without manual scrolling.

Proposed Solution

  • Add a floating button fixed to the bottom-right corner of the Dashboard
  • Button appears only when user scrolls past 400px
  • Clicking it smoothly scrolls to top using window.scrollTo({ top: 0, behavior: 'smooth' })
  • Use Lucide ArrowUp icon
  • Style with Tailwind: fixed bottom-6 right-6 p-3 rounded-full bg-primary text-white shadow-lg hover:scale-105 transition
  • Respect dark/light theme

Feature Area

Dashboard

Alternatives Considered

  • Browser-native scroll (poor UX on long dashboards)
  • Sticky header with back-to-top link (takes up screen space)

Acceptance Criteria

[ ] Button is hidden when at top of page
[ ] Button appears after scrolling 400px down
[ ] Clicking button smoothly scrolls to top
[ ] Button is visible in both light and dark mode
[ ] Button does not overlap with other floating elements (e.g., Discord webhook toast)

Additional Context

No response

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestgssoc:assignedGSSoC: Issue assigned to a contributorneeds-triageNeeds maintainer triage

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions