Reputation: 306
I'm building a website and I'm using react-reveal to animate content on my pages(home page about page, and contact page) as I scroll to them,
Then I noticed that the way react navigate pages is through the 'react-router' which just renders a new component when a link is clicked(or location changes) and not refreshing the whole page entirely,
This means whenever I switch to a new page, the scroll/scroll-bar position on the previous page does not refresh.
Then I found a solution here: a scrollToTop()
function that runs every time a new page is rendered
import React, { useEffect } from "react";
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import HomePage from '../pages/HomePage';
import AboutPage from '../pages/AboutPage';
import ContactPage from '../pages/ContactPage';
const ScrollToTop = () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
};
function AppRouter() {
return (
<>
<Router>
<ScrollToTop />
<Routes>
<Route path='/' element={<HomePage />} />
<Route path='/about' element={<AboutPage />} />
<Route path='/contact' element={<ContactPage />} />
</Routes>
</Router>
</>
);
}
ReactDOM.render(<AppRouter />, document.getElementById('root'));
But now the problem is whenever I navigate to a page, it scrolls to the top and all the animations that react-reveal offers have been triggered already while the scrollToTop()
ran on page render.
So now when user scrolls down the page, there are no animations to display
Question:
- How do force my page to start at the top without using the
scrollToTop()
functionor
- How do I activate
react-reveal
only when the page has scrolled to the top
I have searched here and only found solution of scrollToTop()
, but this removes the reveal on scroll effects
Upvotes: 1
Views: 643