ال scroll لايعمل

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Route, Routes } from "react-router-dom";
import BtmHeader from "./Components/BtmHeader";
import TopHeader from "./Components/TopHeader";
import React from "react";
import Home from "./Page/Home";
import Footer from "./Components/Footer";
import ProductDetails from "./Page/ProductDetails";
import Cart from "./Page/Cart";
import { Toaster } from "react-hot-toast";
import Category from "./Page/Category";
import Favorite from "./Page/Favorite";
import SearchResults from "./Page/SearchResults";
import Login from "./Page/Login";
import Register from "./Page/Register";
import Buying from "./Page/Buying";
import Blog from "./Page/Blog";
import Blog1 from "./Page/BlogsPage/Blog1";
import Blog2 from "./Page/BlogsPage/Blog2";
import Blog3 from "./Page/BlogsPage/Blog3";
import Blog4 from "./Page/BlogsPage/Blog4";
import Blog5 from "./Page/BlogsPage/Blog5";
import Blog6 from "./Page/BlogsPage/Blog6";
import Blog7 from "./Page/BlogsPage/Blog7";
import Blog8 from "./Page/BlogsPage/Blog8";
import Blog9 from "./Page/BlogsPage/Blog9";
import Blog10 from "./Page/BlogsPage/Blog10";
import Blog11 from "./Page/BlogsPage/Blog11";
import Blog12 from "./Page/BlogsPage/Blog12";
import About from "./Page/About";
import Services from "./Page/Services";
import Scroll from "./Components/Scroll";
function App() {
    return (_jsxs(React.Fragment, { children: [_jsx(Scroll, {}), _jsx(Toaster, { position: "bottom-right", toastOptions: {
                    style: {
                        background: "#fff",
                        padding: "15px",
                        borderRadius: "20px",
                    },
                } }), _jsxs("header", { children: [_jsx(TopHeader, {}), _jsx(BtmHeader, {})] }), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Home, {}) }), _jsx(Route, { path: "/product/:id", element: _jsx(ProductDetails, {}) }), _jsx(Route, { path: "/cart", element: _jsx(Cart, {}) }), _jsx(Route, { path: "/category/:category", element: _jsx(Category, {}) }), _jsx(Route, { path: "/favorite", element: _jsx(Favorite, {}) }), _jsx(Route, { path: "/search", element: _jsx(SearchResults, {}) }), _jsx(Route, { path: "/login", element: _jsx(Login, {}) }), _jsx(Route, { path: "/signup", element: _jsx(Register, {}) }), _jsx(Route, { path: "/buying", element: _jsx(Buying, {}) }), _jsx(Route, { path: "/about", element: _jsx(About, {}) }), _jsx(Route, { path: "/services", element: _jsx(Services, {}) }), _jsx(Route, { path: "/blog", element: _jsx(Blog, {}) }), _jsx(Route, { path: "/blog1", element: _jsx(Blog1, {}) }), _jsx(Route, { path: "/blog2", element: _jsx(Blog2, {}) }), _jsx(Route, { path: "/blog3", element: _jsx(Blog3, {}) }), _jsx(Route, { path: "/blog4", element: _jsx(Blog4, {}) }), _jsx(Route, { path: "/blog5", element: _jsx(Blog5, {}) }), _jsx(Route, { path: "/blog6", element: _jsx(Blog6, {}) }), _jsx(Route, { path: "/blog7", element: _jsx(Blog7, {}) }), _jsx(Route, { path: "/blog8", element: _jsx(Blog8, {}) }), _jsx(Route, { path: "/blog9", element: _jsx(Blog9, {}) }), _jsx(Route, { path: "/blog10", element: _jsx(Blog10, {}) }), _jsx(Route, { path: "/blog11", element: _jsx(Blog11, {}) }), _jsx(Route, { path: "/blog12", element: _jsx(Blog12, {}) })] }), _jsx(Footer, {})] }));
}
export default App;
// App.js

import { Route, Routes } from "react-router-dom";
import BtmHeader from "./Components/BtmHeader";
import TopHeader from "./Components/TopHeader";
import React from "react";
import Home from "./Page/Home";
import Footer from "./Components/Footer";
import ProductDetails from "./Page/ProductDetails";
import Cart from "./Page/Cart";
import { Toaster } from "react-hot-toast";
import Category from "./Page/Category";
import Favorite from "./Page/Favorite";
import SearchResults from "./Page/SearchResults";
import Login from "./Page/Login";
import Register from "./Page/Register";
import Buying from "./Page/Buying";
import Blog from "./Page/Blog";
import Blog1 from "./Page/BlogsPage/Blog1";
import Blog2 from "./Page/BlogsPage/Blog2";
import Blog3 from "./Page/BlogsPage/Blog3";
import Blog4 from "./Page/BlogsPage/Blog4";
import Blog5 from "./Page/BlogsPage/Blog5";
import Blog6 from "./Page/BlogsPage/Blog6";
import Blog7 from "./Page/BlogsPage/Blog7";
import Blog8 from "./Page/BlogsPage/Blog8";
import Blog9 from "./Page/BlogsPage/Blog9";
import Blog10 from "./Page/BlogsPage/Blog10";
import Blog11 from "./Page/BlogsPage/Blog11";
import Blog12 from "./Page/BlogsPage/Blog12";
import About from "./Page/About";
import Services from "./Page/Services";
import Scroll from "./Components/Scroll";

function App() {
  return (
    <React.Fragment>
      <Toaster
        position="bottom-right"
        toastOptions={{
          style: {
            background: "#fff",
            padding: "15px",
            borderRadius: "20px",
          },
        }}
      />
      <header>
        <TopHeader />
        <BtmHeader />
      </header>
      <Scroll />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product/:id" element={<ProductDetails />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/category/:category" element={<Category />} />
        <Route path="/favorite" element={<Favorite />} />
        <Route path="/search" element={<SearchResults />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Register />} />
        <Route path="/buying" element={<Buying />} />
        <Route path="/about" element={<About />} />
        <Route path="/services" element={<Services />} />
        {/* Blog Pages Routes */}

        <Route path="/blog" element={<Blog />} />
        <Route path="/blog1" element={<Blog1 />} />
        <Route path="/blog2" element={<Blog2 />} />
        <Route path="/blog3" element={<Blog3 />} />
        <Route path="/blog4" element={<Blog4 />} />
        <Route path="/blog5" element={<Blog5 />} />
        <Route path="/blog6" element={<Blog6 />} />
        <Route path="/blog7" element={<Blog7 />} />
        <Route path="/blog8" element={<Blog8 />} />
        <Route path="/blog9" element={<Blog9 />} />
        <Route path="/blog10" element={<Blog10 />} />
        <Route path="/blog11" element={<Blog11 />} />
        <Route path="/blog12" element={<Blog12 />} />
      </Routes>
      <Footer />
    </React.Fragment>
  );
}

export default App;
//App.tsx

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const Scroll = () => {
    const pathname = useLocation();
    useEffect(() => {
        window.scrollBy({
            top: 0,
            left: 0,
            behavior: 'smooth'
        });
    }, [pathname]);
    return null;
};
export default Scroll;
// Scroll.js

import  { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const Scroll = () => {

    const pathname = useLocation();

    useEffect(() => {
        window.scrollBy({
            top: 0,
            left: 0,
            behavior: 'smooth'
        })
    },[pathname])
  return null;
}

export default Scroll
// Scroll.tsx

ال scroll لايعمل من مفترض عند دخول الى اي صفحة يرفع سكرول الى اعلى كي يرى صفحة وليس footer