Add Scroll to Top Button for Long Pages

[Eshaan-byte]

Add a floating button that appears when scrolling down

Tasks

• Create src/components/ui/ScrollToTop.tsx
• Show button only when user scrolls down 300px
• Position fixed in bottom-right corner
• Smooth scroll animation to top on click
• Add up arrow icon (↑ or use Heroicons)
• Add fade-in/fade-out animation

Acceptance Criteria

• Button appears after scrolling down
• Smooth scroll to top on click
• Doesn't overlap other UI elements
• Accessible (keyboard support)
• Works on mobile and desktop

[SanyamGarg12]

Hi @Eshaan-byte, please assign me this issue.
Note : I am participating in hacktoberfest

[SanyamGarg12]

@Eshaan-byte please review

[Eshaan-byte]

Hi @SanyamGarg12, Your ScrollToTop implementation is perfect! ✅ The component itself is excellent and meets all requirements. However, your PR branch is outdated. It's based on an old version of main from before PRs #33, #39, and #40 were merged. This makes your PR show 13 files changed instead of just 2. To fix this, please rebase on latest main:
git checkout main
git pull origin main
git checkout
git rebase main

Resolve any conflicts if needed

git push --force-with-lease
After rebasing, your PR should show only 2 files changed:
✅ src/app/layout.tsx
✅ src/components/ui/ScrollToTop.tsx
Once rebased, I'll approve and merge immediately! Your ScrollToTop code is ready to go. 🚀

[SanyamGarg12]

Hi @SanyamGarg12, Your ScrollToTop implementation is perfect! ✅ The component itself is excellent and meets all requirements. However, your PR branch is outdated. It's based on an old version of main from before PRs #33, #39, and #40 were merged. This makes your PR show 13 files changed instead of just 2. To fix this, please rebase on latest main: git checkout main git pull origin main git checkout git rebase main

Resolve any conflicts if needed

git push --force-with-lease After rebasing, your PR should show only 2 files changed: ✅ src/app/layout.tsx ✅ src/components/ui/ScrollToTop.tsx Once rebased, I'll approve and merge immediately! Your ScrollToTop code is ready to go. 🚀

done

[Eshaan-byte]

Almost there, @SanyamGarg12! Your PR still includes PR #37 (CSV export by another contributor). Your PR should only have 2 files:
src/app/layout.tsx
src/components/ui/ScrollToTop.tsx
Currently it has 4 files (includes CSV export files). Please create a clean branch from latest main with only your ScrollToTop files, then update this PR. Your ScrollToTop code is ready to merge once isolated! 🚀

[SanyamGarg12]

Almost there, @SanyamGarg12! Your PR still includes PR #37 (CSV export by another contributor). Your PR should only have 2 files: src/app/layout.tsx src/components/ui/ScrollToTop.tsx Currently it has 4 files (includes CSV export files). Please create a clean branch from latest main with only your ScrollToTop files, then update this PR. Your ScrollToTop code is ready to merge once isolated! 🚀

I created a new PR after rebasing. Please review it now @Eshaan-byte

[Eshaan-byte]

@SanyamGarg12 - Thanks for working on this! I checked the implementation and found that the ScrollToTop component is missing:
❌ Missing Implementation:
No ScrollToTop.tsx file - The required src/components/ui/ScrollToTop.tsx component doesn't exist
No scroll detection - Missing logic to show button after scrolling 300px
No smooth scroll - Missing animation to top on click
No layout integration - Not added to src/app/layout.tsx
No animations - Missing fade-in/fade-out effects
No accessibility - Missing keyboard support
Please create:
src/components/ui/ScrollToTop.tsx with scroll detection logic
300px threshold - Show button only after scrolling down 300px
Smooth scroll animation - window.scrollTo({ top: 0, behavior: 'smooth' })
Fade animations - Fade-in/fade-out with CSS transitions
Accessibility - Keyboard support and proper ARIA labels
Layout integration - Add to src/app/layout.tsx
Bottom-right positioning - Fixed position with proper z-index
Example structure needed:
Once the component is created with all features, I'll review and merge. Thanks! 🌱