Floating Scroll-to-Top from Button

[JaYRaNa213]

The feature

Description

Add a floating Scroll-to-Top button that appears after the user scrolls 300px down the page, allowing quick navigation back to the top of the landing page.

This will improve usability on long-scrolling pages and enhance overall user experience.

Problem Statement

Currently, users must manually scroll back to the top of the page after reaching the bottom. On long landing pages, this can feel tedious, especially on mobile devices.

Proposed Solution

Implement a floating button that:
Appears only after scrolling 300px
Is fixed to the bottom-right corner
Smoothly scrolls the user back to the top when clicked

Video + Screenshots demo

scroll_to_top.mp4

Screenshots :

Mobile View

Desktop View

Technical Implementation Details

Files to be Changed

src/App.js

Import and render the new ScrollToTop component

New Files to be Added

src/components/ScrollToTop/ScrollToTop.js

src/components/ScrollToTop/ScrollToTop.css

Suggested Component Behavior

• Use window.addEventListener("scroll") to detect scroll position
• Show button when window.scrollY > 300
• Hide button otherwise
• Use window.scrollTo({ top: 0, behavior: "smooth" }) on click
• Button should be accessible (aria-label="Scroll to top")

Responsive Design (Mobile + tablet + Desktop )

• Works across desktop, tablet, and mobile devices
• Proper spacing from screen edges

Testing & Verification

1. Manual testing on desktop and mobile viewports
2. Verified button visibility and smooth scrolling behavior
3. No regression in existing components

Impact

• Improved navigation for long pages
• Better mobile user experience
• Clean, reusable component with minimal overhead

Motivation, pitch

this feature make the website more user friendly

[JaYRaNa213]

Hello @M4dhav sir

please assign this issue to me