1. react-scroll Kütüphanesi: Bu kütüphane, React uygulamalarında pürüzsüz kaydırma animasyonları sağlamak için kullanılır 13. Kurulum için

   npm install react-scroll

   komutu kullanılır 13.

import React from 'react';
import { Link, Element } from 'react-scroll';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="section1" smooth={true} duration={500}>Section 1</Link>
          </li>
          <li>
            <Link to="section2" smooth={true} duration={500}>Section 2</Link>
          </li>
        </ul>
      </nav>
      <Element name="section1">
        <section style={{ height: '100vh', backgroundColor: 'lightblue' }}>
          <h1>Section 1</h1>
          <p>This is the content of section 1</p>
        </section>
      </Element>
      <Element name="section2">
        <section style={{ height: '100vh', backgroundColor: 'lightgreen' }}>
          <h1>Section 2</h1>
          <p>This is the content of section 2</p>
        </section>
      </Element>
    </div>
  );
}
export default App;
Kopyala

2. useRef ve useEffect Hook'ları: Bu yöntem, bir bileşenin oluşturulduktan sonra kaydırılmasını sağlar 2.

import React from 'react';

function Alert({ alert, ...props }) {
  const alertRef = React.useRef(null);

  React.useEffect(() => {
    if (alertRef.current) {
      alertRef.current.scrollIntoView({ behavior: 'smooth' });
    }
Kopyala