Next.js and snapscroll not scrolling to top of page on route change

Question

Snapscroll and height:100vh together seemed to be causing a problem where changing pages would not be showing the 1st element, instead were either influenced from the pages previous position, or the position of the previous page.

As i am using Sanity.js, the "1st" page is unknown and a generic holding component is used to load all sections, so simply adding "id='top'" isn't feasible.

Answer 1

in my [[...slug]] file, where the layout hold my sectionRenderer, i query for the "SECTIONCONTAINER" id, which there are multiple of, but this only returns the 1st. Then I used an IIFE on the found element to scrollIntoView anytime the route(slug) changes.

hopefully this helps someone

    useEffect(() => {
        setWhiteText(true);
        const myElement = document.getElementById('SECTIONCONTAINER');
        //IIFE
        (() => {
            myElement.scrollIntoView({ behavior: 'auto' });
        })();

    }, [slug]);