Back to top button added

[Souradeep858]

Related Issue

• Closes: #

#478

Description

Added a reusable Back to Top button component using React TypeScript and Tailwind CSS.
The button appears after scrolling down the page and smoothly scrolls the user back to the top when clicked.

Features added:

Smooth scroll-to-top functionality
Responsive fixed positioning
Green themed UI styling
Lucide React arrow icon integration
Integrated component into the Home page

How Has This Been Tested?

Verified button visibility after scrolling down
Tested smooth scrolling functionality on click
Checked responsiveness on different screen sizes
Confirmed proper rendering with existing page layout

Screenshots (if applicable)

---

Type of Change

• Bug fix
• [.] New feature
• Code style update
• Breaking change
• Documentation update

Summary by CodeRabbit

• New Features
  • Added a floating "back to top" button that displays when users scroll down the page, enabling smooth scrolling to the top. Available on Contributors, Home, and Tracker pages.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	e5c4eb8
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a12c63b12dda000086bae83
😎 Deploy Preview	https://deploy-preview-481--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new BackToTopButton component is created and integrated across the application. The component listens to scroll events, displays a floating button when scrolling exceeds 300px, and smoothly scrolls back to the top on click. It is then added to the Contributors, Home, and Tracker pages.

Changes

Back-to-Top Button Feature

Layer / File(s)	Summary
BackToTopButton component implementation src/components/Backtotop.tsx	New React component with useState and useEffect for scroll visibility toggling, scrollToTop handler for smooth window scroll, and conditional fixed-position button rendering with ArrowUp icon and accessibility label.
Page integrations src/pages/Contributors/Contributors.tsx, src/pages/Home/Home.tsx, src/pages/Tracker/Tracker.tsx	BackToTopButton is imported and rendered within the JSX layout of each page, positioned before container closing elements.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• 🚀 Feature: Adding a back to top button #478: Addresses the feature request for a back-to-top button component used across multiple pages.

Suggested labels

gssoc25, level1

Poem

🐰 A button floats on every scroll,
carrying readers back home to their goal,
smooth and gentle, never slow—
the journey upward starts to flow! ⬆️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Back to top button added' clearly and concisely describes the main change—adding a new back-to-top button component. It directly reflects the primary modification across the changeset.
Description check	✅ Passed	The description covers all required template sections: Related Issue (#478), detailed Description of features added, How Has This Been Tested with specific verification steps, Screenshots showing the component in action, and Type of Change marked as New feature.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉 Thank you @Souradeep858 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/Backtotop.tsx`:
- Around line 7-21: The visibility toggle only runs on scroll events, so if the
page mounts at a scrolled position the BackToTop button may remain hidden;
inside the useEffect that defines toggleVisibility (the function that calls
setIsVisible based on window.scrollY), call toggleVisibility() once immediately
after adding the scroll listener (or before) so the initial visibility state is
initialized on mount, keeping the existing window.addEventListener("scroll",
toggleVisibility) and cleanup removeEventListener intact.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f8ffd84f-404c-403f-ac9e-23df8f47c535

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6bc3e and e5c4eb8.

📒 Files selected for processing (4)

• src/components/Backtotop.tsx
• src/pages/Contributors/Contributors.tsx
• src/pages/Home/Home.tsx
• src/pages/Tracker/Tracker.tsx

[Souradeep858]

@mehul-m-prajapati sir it's done , you can check

[Souradeep858]

@mehul-m-prajapati sir it would be better if you look at the pr and review it.

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #481 has been merged! 🎉🎉