Is there a way to scroll to top on reload ? 🤔

[flosrn]

Hello, I would like to know if there a way to scroll to top instantly on every page and every browser refresh ?

Thank you 🙏

[mattcarlotta]

You can utilize the Router object in a custom _app.js page:

import { useRouter } from "next/router";

const App = ({ Component, pageProps }) => {
  const { pathname } = useRouter();

  useEffect(() => {
    // some browsers (like safari) may require a timeout to delay calling this
    // function after a page has loaded; otherwise, it may not update the position
    window.scrollTo(0, 0);
  }, [pathname]);

  return <Component {...pageProps} />
};

export default App;

Alternatively, you can bind a "resetWindowScrollPosition" function to some Router Events if you want to update the position more discriminately:

import Router from "next/router";

const App = ({ Component, pageProps }) => {
   const resetWindowScrollPosition = useCallback(() => window.scrollTo(0, 0), []);

   useEffect(() => {
    Router.events.on("routeChangeComplete", resetWindowScrollPosition);

    return () => {
      Router.events.off("routeChangeComplete", resetWindowScrollPosition);
    };
  }, []);

  return <Component {...pageProps} />
};

export default App;

[flosrn]

@mattcarlotta
It's not working properly.. :/

[mattcarlotta]

@flosrn You'll need to set a timeout. That said, this scroll to top on refresh is anti-pattern. By design, a browser refresh is supposed to persist the window scroll position. In addition, due to how Javascript is executed asynchronously, the timeout may have to be increased exponentially to factor in for slower devices. As a result, unfortunately, this results in jerky window behavior upon page load and an overall unpleasant UX (it'll also interfere with scrolling down as soon as the page loads). Even though window.scrollTo accepts a behavior option to smooth the scrolling, I'd still recommend moving away from this approach completely.

Working repo:
https://u1lv7.sse.codesandbox.io/ (scroll down any page and refresh)

Updated code:

import * as React from "react";

const App = ({ Component, pageProps }) => {
  const timeoutRef = React.useRef();

  const clearTimer = React.useCallback(
    () => clearTimeout(timeoutRef.current),
    []
  );

  React.useEffect(() => {
    if (timeoutRef.current) clearTimer();

    timeoutRef.current = setTimeout(() => {
      window.scrollTo(0, 0);
    }, 1000);

    return () => {
      clearTimer();
    };
  }, [clearTimer]);

  return <Component {...pageProps} />;
};

export default App;

[flosrn]

@mattcarlotta It's too bad that the behavior is not instantaneous. I wanted a solution which on each reload the browser calculates the position of the scroll (y) of an element in relation to the page in next.js app

[topovik]

hi, work solution

  useEffect(() => {
    window.history.scrollRestoration = 'manual'
  }, []);

[thachsteven]

Not working for me :(

[mylesodey]

Works perfectly for me, thanks for your help

[jkiss]

works for me

[Rozygeldi94]

perfect, thanks

[KishiTheMechanic]

It scrolls to top when the page is reloaded.

...
  const resetWindowScrollPosition = useCallback(() => window.scrollTo(0, 0), [])

  useEffect(() => {
    window.onbeforeunload = function () {
      resetWindowScrollPosition()
    }
  }, [resetWindowScrollPosition])
...

[AKhatabdev]

Best working fix! Thank you.

[mahmudaakterdisa]

it wasn't worked for me.

[NokiOvO]

thank you very much.

[keytrap-x86]

This is crazy I've been trying all sorts of solutions, in this thread, using scrollRestoration in next.config.js and none of them work on Safari, iPhone 12 !

[Mastrianth]

hi, try this, in next 12(with typescript) it work(if you use js replace 'as any') :

import { useRouter } from 'next/router';
import React, { useEffect } from 'react';

export default function useScrollToTop() {
  const router = useRouter();

  useEffect(() => {
    setTimeout(() => {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'instant' as any,
      });
    }, 0);
  }, [router.pathname]);
}

p.s.
you can remove part with router

[mahmudaakterdisa]

//try this solution (App.js). worked for me.
useEffect(() => {
window.history.scrollRestoration = 'manual'
}, []);

[martijnvanderpol]

For those who may be struggling with this issue, none of the above solutions worked for me except for this one:

<Head>
  {/* Tell the browser to never restore the scroll position on load */}
  <script dangerouslySetInnerHTML={{ __html: `history.scrollRestoration = "manual"` }} />
</Head>

I've placed this in my App.tsx, and this works for me to prevent the browser from automatically restoring the scroll position on page load.

[mustafaabobakr]

<Head>
  {/* Tell the browser to never restore the scroll position on load */}
  <script dangerouslySetInnerHTML={{ __html: `history.scrollRestoration = "manual"` }} />
</Head>

Perfection 🎉
Thanks, @martijnvanderpol

[patrykmaron]

This is crazy, nothing works for me

[joebentaylor1995]

Did you put it in your layout file?