Without seeing anymore code my guess would be that your button location is actually at the bottom of the page so when you change route you are staying at the bottom as you have no scroll to top component.

To scroll to the top on every route change do the following.

New component ScrollToTop.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

Then change your app.js to this

import {Link,Routes,Route,Navigate} from 'react-router'

const App = () => {
  const user=true
  return <div>
    <ScrollToTop />
    <Routes>
      <Route exact path='/' element={<Home/>} />
      <Route exact path="/products/:category" element={ <ShoppingCat/>}/>
      <Route exact path="/product/:id" element={ <ProductView/>}/>
      <Route exact path="/cart" element={ <Cart/>}/>
       <Route exact path="/login" element={user?<Navigate to='/'/>: <Login/>}/>
       <Route exact path="/register" element={ user? <Navigate to='/'/> :<Register/>}/>
    </Routes>
</div>

While the answer above is good for older versions, withRouter and history no longer exist in V6 so here is how the scroll to the top wrapper looks in later version :

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

and in index.js :

import ScrollToTop from "./ScrollToTop";


ReactDOM.render(
 
    <Router>
      <ScrollToTop />
      <App />
    </Router>,

  document.getElementById("root")
);