Skip to content

[FEAT] Add a Floating "Scroll to Top" Button for the Agents List #3149

Description

@Kadaliswarna

Problem Statement

As a user, I want to quickly return to the top of the Agents list so that I can switch providers, use the search bar, or navigate without manually scrolling through a long list.

As the number of available agents continues to grow, returning to the top of the page becomes increasingly time-consuming. A dedicated "Scroll to Top" button would improve navigation and overall usability.

Proposed Solution

Add a floating "Scroll to Top" button that appears in the bottom-right corner after the user scrolls beyond a predefined distance (e.g., 300–500px).

Behavior

  • The button remains hidden when the page loads.
  • It becomes visible once the user scrolls past the threshold.
  • Clicking the button smoothly scrolls the page back to the top.
  • The button should be accessible with an appropriate aria-label.
  • It should be responsive and work well on both desktop and mobile devices.
  • The button should not obstruct existing UI elements.

Feature Area

Dashboard

Alternatives Considered

  • Relying on the browser's scrollbar or keyboard shortcuts.
  • Keeping a permanently visible button, which adds unnecessary UI clutter.
  • Using only a keyboard shortcut, which is not discoverable for all users.

A floating button that appears only when needed offers the best balance between usability and a clean interface.

Acceptance Criteria

  • A floating "Scroll to Top" button appears after the user scrolls beyond the configured threshold.
  • Clicking the button smoothly scrolls the page to the top.
  • The button is hidden when the user is near the top of the page.
  • The button is responsive and works correctly on desktop and mobile.
  • The button includes appropriate accessibility attributes (e.g., aria-label).
  • The feature does not interfere with existing UI components.

Additional Context

Many modern applications and documentation websites include a floating "Scroll to Top" button to improve navigation on long pages. This is a lightweight UX enhancement that requires minimal implementation while providing a noticeable improvement in usability.

Metadata

Metadata

Assignees

Labels

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

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions