Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG] : Add a "Back to Top" button for improved navigation on long pages

Open Beginner friendly
  • Is something wrong?
#444 2 comments 1 reaction 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

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

Research direction

Find the landing page entry point and read how it handles scrolling and page styles. Add a floating button that appears after scrolling down, stays at the bottom-right, and smoothly returns the page to the top; hide it when the page is at the top. Verify the visibility threshold, placement, and scroll behavior on the long landing page.

Written by the indexing model from the issue text.

Description

area: web type:feature
Description

Feature Request

The landing page is relatively long, requiring users to scroll through multiple sections before reaching the footer. Once at the bottom, users must manually scroll back to the top to access the navigation bar.

Adding a "Back to Top" button would improve navigation and enhance the overall user experience.

Expected Behavior

  • Display a floating Back to Top button after the user scrolls down a certain distance (e.g., 300–500px).
  • Position it in the bottom-right corner of the screen.
  • Clicking the button should smoothly scroll the page back to the top.
  • Hide the button when the user is already at the top of the page.

Benefits

  • Improves navigation on long pages.
  • Reduces unnecessary scrolling.
  • Enhances accessibility and overall user experience.
  • Matches the behavior commonly found on modern websites.

Suggested Implementation

  • Add a floating action button using position: fixed.
  • Use window.scrollTo({ top: 0, behavior: "smooth" }) for smooth scrolling.
  • Show the button only after the user has scrolled beyond a predefined threshold.
Dominant language
Kotlin
Stars
760
Forks
122
Avg merge
15h 3m
Merged PRs (30d)
62

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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.

More from ProdigyV21/ARVIO

All issues in ProdigyV21/ARVIO

Similar issues

More Kotlin issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.