Skip to content

Feat/scroll to top button #551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Feat/scroll to top button #551

wants to merge 7 commits into from

Conversation

@7se7en72025
Copy link
Contributor

@7se7en72025 7se7en72025 commented Nov 15, 2025 •
edited
Loading

📝 Description

This PR adds a reusable scroll-to-top button component that appears on all pages of the website. The button provides users with a convenient way to quickly return to the top of the page after scrolling down, improving navigation and user experience.

Key Features:

  • Smooth fade-in/fade-out animations using Framer Motion
  • Appears automatically after scrolling 300px down
  • Responsive design that adapts to mobile and desktop screens
  • Dark mode compatible
  • Accessible with proper ARIA labels
  • Uses ChevronUp icon from lucide-react (no additional assets needed)
  • Removed duplicate scroll-to-top button from NewsDetailPage

🔗 Related Issue

Fixes #546

🔄 Type of Change

  • 📱 New Feature (new page, component, or functionality)
  • 🎨 UI/UX Update (visual changes, styling improvements)
  • ♿ Accessibility Enhancement

📷 Visual Changes

Button Appearance:

  • Circular blue gradient button (from-blue-600 to-blue-700)
  • Positioned in bottom-right corner (24px from edges)
  • ChevronUp icon in white
  • Smooth shadow with blue tint
  • Size: ~48px × 48px on desktop, ~40px × 40px on mobile

Behavior:

  • Fades in after scrolling 300px
  • Hover effect: scales to 110% and lifts slightly
  • Smooth scroll animation when clicked
  • Fades out when scrolled back to top

🧪 Testing Performed

📱 Browser Compatibility

  • Chrome (Version: Latest)
  • Firefox (Version: Latest)
  • Safari (Version: Latest)
  • Edge (Version: Latest)
  • Mobile Chrome (Device: Tested on various devices)
  • Mobile Safari (Device: Tested on various devices)

🖥️ Responsive Design

  • Desktop (1200px+)
  • Tablet (768px - 1199px)
  • Mobile (320px - 767px)

✅ Test Cases

  1. Button appears after scrolling 300px down
  2. Button disappears when scrolled back to top
  3. Clicking button smoothly scrolls to top of page
  4. Hover effects work correctly (scale and lift)
  5. Button is visible and functional in dark mode
  6. Button is properly positioned on all screen sizes
  7. No duplicate buttons appear (removed from NewsDetailPage)
  8. Button works on all pages (MainPage, NewsPage, AboutUs, etc.)

♿ Accessibility

  • Proper heading hierarchy maintained
  • ARIA labels added where needed (aria-label="Scroll to top" and aria-hidden="true" on icon)
  • Color contrast requirements met (white text on blue gradient background)
  • Keyboard navigation works correctly (button is focusable and clickable)
  • Screen reader testing performed (button is announced correctly)

📋 PR Checklist

  • My code follows the project's coding style guidelines
  • I have tested these changes locally
  • I have updated the documentation accordingly (component is self-documenting)
  • My changes generate no new warnings or console errors
  • I have added tests that prove my fix/feature works (manual testing performed)
  • All existing tests pass successfully
  • I have checked for and resolved any merge conflicts
  • I have optimized images/assets (no new assets added, using lucide-react icon)
  • I have validated all links are working correctly

💭 Additional Notes

Implementation Details:

  • Created new component: src/components/shared/ScrollToTop.tsx
  • Added component to src/App.tsx to appear globally on all pages
  • Removed duplicate scroll-to-top button from src/pages/News/NewsDetailPage.tsx
  • Uses existing dependencies (framer-motion, lucide-react) - no new dependencies added
  • Follows existing code patterns and styling conventions

Technical Notes:

  • Button visibility is controlled by scroll position (300px threshold)
  • Uses Framer Motion's AnimatePresence for smooth enter/exit animations
  • Spring animation configuration for natural feel
  • Responsive padding and sizing using Tailwind's responsive classes
  • Dark mode support via existing dark mode classes

Files Changed:

  • src/components/shared/ScrollToTop.tsx (new file)
  • src/App.tsx (added ScrollToTop component)
  • src/pages/News/NewsDetailPage.tsx (removed duplicate button)

📚 Reviewer Resources

Thank you for contributing to the Sugar Labs website! 🎉

@7se7en72025
addedfavicons
396ead9 
addedfavicons and changed Randomfavicon.js
@7se7en72025
Merge branch 'main' of https://github.com/7se7en72025/www-v2
c26c275
@7se7en72025
feat: add scroll-to-top button on all pages
e8c41ac 
- Create reusable ScrollToTop component with smooth animations
- Add ChevronUp icon from lucide-react (no asset needed)
- Button appears after scrolling 300px
- Smooth fade-in/fade-out animations with Framer Motion
- Hover effects with scale and lift animations
- Responsive design with mobile-friendly sizing
- Dark mode compatible
- Accessible with proper ARIA labels
- Remove duplicate scroll-to-top button from NewsDetailPage
- Add component to App.tsx to appear on all pages
@github-actions
Copy link

github-actions bot commented Nov 15, 2025

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform Command Description
🐧 Unix/macOS/Linux npm run format Auto-fix all formatting issues
🪟 Windows npm run format:file <filename> Fix specific files
🔍 Check Only npm run format:check Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

🛠️ Next Steps

  1. Fix the issues mentioned above
  2. Test locally to ensure everything works
  3. Push your fixes to this branch
  4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

@github-actions
Copy link

github-actions bot commented Nov 15, 2025

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow Status Details
🔨 Continuous Integration ✅ Passed Build completed successfully
📝 Code Linting ✅ Passed All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

@7se7en72025
Copy link
Contributor Author

7se7en72025 commented Nov 15, 2025

@sa-fw-an @omsuneri @pikurasa pls review this if time permits. :)

sa-fw-an
sa-fw-an reviewed Nov 15, 2025
View reviewed changes
@Shubhashish-Chakraborty
Copy link

Shubhashish-Chakraborty commented Nov 15, 2025

Hii @7se7en72025
Actually i was working on this issue and going to open up a PR.
i was waiting for maintainer's approval, then he replied and i got to know we are free to open up PR's...

@github-actions
Copy link

github-actions bot commented Nov 15, 2025

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow Status Details
🔨 Continuous Integration ✅ Passed Build completed successfully
📝 Code Linting ✅ Passed All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

@github-actions
Copy link

github-actions bot commented Nov 15, 2025

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow Status Details
🔨 Continuous Integration ✅ Passed Build completed successfully
📝 Code Linting ✅ Passed All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sa-fw-an sa-fw-an sa-fw-an left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Feature Request: Add a "Scroll to Top" button : improves UX

3 participants

@7se7en72025 @Shubhashish-Chakraborty @sa-fw-an