چطور در React.js به یک المان اسکرول کنیم؟

برای اسکرول کردن به یک المان خاص در React.js چند روش مختلف وجود داره. یکی از راحت‌ترین روش‌ها استفاده از ریفرنس‌ها (refs) در React همراه با تابع scrollIntoView() جاوااسکریپت هست. در اینجا یه نمونه کد برای این کار قرار می‌دم:

import React, { useRef } from "react";
const ScrollToElement = () => {
  const myRef = useRef(null);
  const scrollToElement = () => {
    myRef.current.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <div>
      <button onClick={scrollToElement}>برو به پایین</button>
      <div style={{ height: "1500px" }}></div>
      <div ref={myRef}>
        <h2>این همون بخشی هست که می‌خوایم بهش اسکرول کنیم</h2>
      </div>
    </div>
  );
};
export default ScrollToElement;

توضیح کد:

1. از useRef برای ساختن یک ریفرنس به المان مورد نظر استفاده شده.
2. توی تابع scrollToElement از scrollIntoView() استفاده شده که باعث می‌شه صفحه به المان مورد نظر اسکرول بشه. از پارامتر { behavior: 'smooth' } هم برای اسکرول نرم و روان استفاده می‌شه.

این روش خیلی کاراست و به‌سادگی با استفاده از ریفرنس‌ها در React می‌تونی به هر المانی که می‌خوای اسکرول کنی. نیازی هم به استفاده از جاوااسکریپت خالص نیست و کاملاً با سبک کدنویسی React هماهنگه.

موفق باشی!