'Setting window top without scrolling in page transition nextjs

Is it possible on page mount (useEffect) setting the window scroll top position without the scroll effect? right now in nextjs i have pages which behaves like SPA, am persisting the scroll position of each page in react Context. below is my useEffect in all the pages.

useEffect(() => {

  window.scrollTo({ top: scrollPosition[page].current.scrollPos, behavior: 'auto' });

  const handleScrollPos = () => {
    scrollPosition[page].current.scrollPos = window.scrollY;
  };
  window.addEventListener('scroll', handleScrollPos);
    return () => {
    window.removeEventListener('scroll', handleScrollPos);
  };
}, []);

the problem is, if am in page Home with top value 400, switch to page about the page about should start from 0 but right now its scrolling from 400 to 0 in about page

PS: somehow this implementation is working without scroll behavoiur in safari, just in chrome this is happening



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source