feat: add a scroll to top button in the website

[Sahil-u07]

Added the scroll to top ui button for user's better experience

Home._.AboutCode.org.-.Google.Chrome.2026-01-14.23-08-43.mp4

Home._.AboutCode.org.-.Google.Chrome.2026-01-14.23-10-58.mp4

[Copilot]

Pull request overview

This PR adds a scroll-to-top button feature to the website's homepage to improve user experience. The button appears when users scroll down more than 150 pixels and allows them to quickly return to the top of the page with a smooth scroll animation.

Changes:

• Created a new reusable ScrollButton component with scroll detection and smooth scroll-to-top functionality
• Added CSS styling with dark mode support for the scroll button
• Integrated the scroll button into the homepage

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
website/src/pages/index.js	Imports and renders the ScrollButton component on the homepage
website/src/components/ScrollButton/index.js	Implements the scroll button component with visibility toggle based on scroll position
website/src/components/ScrollButton/styles.module.css	Defines styles for the scroll button including hover states and dark mode support

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The cleanup function is only returned when window is defined, but if window is undefined during SSR, the useEffect returns undefined. This is inconsistent with the React hooks pattern. The condition check should be moved inside the event listener registration, or the cleanup should always be returned (even if it's a no-op function).

Suggested change

	}
	}
	// Return a no-op cleanup function when window is undefined (e.g., during SSR)
	return () => {};

[Copilot]

The scroll event handler is called on every scroll event without throttling or debouncing. This can cause performance issues on lower-end devices or during fast scrolling. Consider using a throttle or debounce mechanism to limit the frequency of state updates.

Suggested change

	export default function ScrollButton() {
	const [showButton, setShowButton] = useState(false);
	useEffect(() => {
	const handleScroll = () => {
	if (typeof window !== 'undefined') {
	setShowButton(window.scrollY > 150);
	}
	};
	import throttle from 'lodash.throttle';
	export default function ScrollButton() {
	const [showButton, setShowButton] = useState(false);
	useEffect(() => {
	const handleScroll = throttle(() => {
	if (typeof window !== 'undefined') {
	setShowButton(window.scrollY > 150);
	}
	}, 100);