#next router

1 messages · Page 1 of 1 (latest)

supple gazelle
#

I'm changing routes using router.push in next 13 app directory. How do I make sure to scroll the page to top on the loaded page? Currently it stays on same location.

daring kettleBOT
#

Hi @supple gazelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To ensure that the page scrolls to the top when using router.push in Next.js 13, you can set the scroll option to true when calling router.push. By default, the scroll option is set to true, so it should scroll to the top of the page after navigation. However, if it's not working as expected, you can explicitly set the scroll option:

router.push(url, as, { scroll: true });

Here's the relevant extract for reference:

  • options - Optional object with the following configuration options:
    • scroll - Optional boolean, controls scrolling to the top of the page after navigation. Defaults to true

Source: Next.js > api-reference > next > router > next/router > router object > router.push > Part 1 (https://nextjs.org/docs/api-reference/next/router)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

next/router | Next.js

Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.

#

@supple gazelle kapa.ai is still learning and improving, please let us how it did by reacting below

supple gazelle
#

@daring kettle this does not work with next/navigation in next 13 app dir.

daring kettleBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Hmm, I don't know enough to give you a confident answer yet. The provided extracts don't cover the next/navigation usage in Next.js 13 app directory. I recommend referring to the Next.js documentation (https://nextjs.org/docs) for more information on this topic.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Getting Started | Next.js

Get started with Next.js in the official documentation, and learn more about all our features!