swagger-api / swagger-api/swagger-ui

Add Scroll-to-Top Button Feature

Open
#10,169 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

cat: user experience P2 type: feature
Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Description

Description: A scroll-to-top button would greatly enhance user experience, especially for long web pages. This button should appear once the user scrolls down a certain distance and allow them to quickly return to the top of the page with a single click.

Feature Requirements:

Visibility:

The button should appear when the user scrolls down 20px or more from the top of the document.
It should be hidden when the user is near the top of the page.
Positioning:

The button should be positioned in the bottom-right corner of the viewport (fixed position).
It should stay visible while scrolling.
Design:

A simple round button with a label like "Top" or an arrow icon.
Hover effect to change the button's color.
Customizable appearance via CSS (background color, size, shadow, etc.).
Functionality:

When clicked, the button should smoothly scroll the user to the top of the page.
Compatibility with modern browsers (Chrome, Firefox, Safari, etc.).
Accessibility:

The button should have a title/aria-label for screen readers (e.g., "Go to top").

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the frontend entry points and existing styling or UI components in Swagger UI; the issue does not name specific files or tests. Implement the button behavior, fixed positioning, hover styling, smooth return to the top, and accessible labeling described in the requirements, then verify its visibility while scrolling in modern browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.