Feature: Add Responsive Back-to-Top Button

[krishnendu07-code]

Description

Add Back-to-Top Navigation Button

Description

The FreshScan AI landing page contains multiple vertically stacked sections, requiring users to scroll significantly to return to the top of the page.

Adding a Back-to-Top button would improve navigation and overall user experience, particularly on mobile devices and smaller screens.

Proposed Solution

Add a floating button positioned in the bottom-right corner of the screen that:

• Appears only after the user scrolls down a certain distance (e.g. 300px)
• Smoothly scrolls the page back to the top when clicked
• Uses the existing FreshScan AI neon/cyberpunk design language
• Remains responsive on desktop and mobile devices

UI Suggestions

• Circular floating action button
• Up-arrow icon
• Neon green accent matching the project theme
• Smooth fade-in/fade-out animation
• Hover glow effect

Acceptance Criteria

• Hidden when the user is near the top of the page
• Appears after scrolling down
• Smoothly scrolls to the top when clicked
• Works across desktop and mobile devices
• Matches the existing visual design system

Benefits

• Improved navigation
• Better mobile usability
• Consistent modern UX pattern
• Non-intrusive enhancement

[krishnendu07-code]

@jpdevhub Hi, I would be happy to work on this enhancement. I have previously implemented a similar Back-to-Top feature and can ensure it matches the existing design system and remains responsive across devices.

[RubinaathKP]

@jpdevhub Hi i would love to solve this issue, under SSoC 26'. I have good experience in solving these kind of frontend issues.

Kindly assign this work to me

[jpdevhub]

@krishnendu07-code go ahaed

[jpdevhub]

@RubinaathKP take any other issues