اسکرول به بالای صفحه بعد از رندر شدن در React.js

برای اینکه بعد از رندر شدن کامپوننت در React صفحه به بالای خودش اسکرول بشه، چندین راه مختلف وجود داره. ساده‌ترین روش استفاده از متد window.scrollTo در useEffect هست. این متد بهت اجازه میده که بعد از رندر شدن کامپوننت به طور خودکار صفحه رو به نقطه‌ای که می‌خوای اسکرول کنی.

import React, { useEffect } from "react";
const YourComponent = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return <div>{/* Your component content here */}</div>;
};
export default YourComponent;

توضیحات:

• useEffect همون هوک (Hook) معروف در React هست که بهت اجازه میده کارهایی مثل درخواست‌های API، تغییرات DOM، یا همین اسکرول رو بعد از هر رندر انجام بدی.
• window.scrollTo(0, 0) به مرورگر میگه که صفحه رو به مختصات (0,0) ببره، یعنی دقیقاً بالای صفحه.

این روش خیلی ساده و کاربردی هست، اما اگه پروژه‌ات پیچیده‌تره و نیاز به کنترل بیشتری داری، می‌تونی از کتابخونه‌هایی مثل react-router-dom استفاده کنی تا اسکرول رو فقط در بعضی شرایط خاص انجام بدی. مثلاً وقتی کاربر بین صفحات جابجا میشه.

اگر از react-router-dom استفاده می‌کنی و می‌خوای اسکرول رو کنترل کنی، می‌تونی یه کامپوننت مثل این بسازی:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
const ScrollToTop = () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
};
export default ScrollToTop;