Breaking News: Grepper is joining You.com. Read the official announcement!

Auto scroll to top when a route is changing

Omar Faruk answered on September 9, 2024 Popularity 1/10 Helpfulness 1/10

answer Auto scroll to top when a route is changing

related latex orthogonal

Auto scroll to top when a route is changing

Comment

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;

//Layout.jsx

<Header />
      {/* Main content */}
<main className="flex-grow">
        {/* Scroll to top on route change */}
<ScrollToTop />
<Outlet /> {/* This tells React Router where to render the child routes */}
</main>

      {/* Footer */}
<Footer />

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: auto scroll whatever when

Link to this answer
Share Copy Link