Router.push('/link') don't scroll top of the page when triggered

Hello,

maybe I am missing something, but when I use this function and redirect to another page scroll doesn’t reset to top but the page loads scrolled to middle, I know why this issue happens, but can I somehow fix it with some flag like JAVASCRIPT Router.pusht({pathname: '/link', scrollreset: true}) or something like this, didn’t find anything similar in documentation

Issue Analytics

State:
Created 6 years ago
Reactions:11
Comments:34 (9 by maintainers)

Top GitHub Comments

130reactions

graglandcommented, Nov 8, 2017

I agree there should be a scrollreset option. If you don’t want to do it in componentDidMount you can also do Router.push('/link').then(() => window.scrollTo(0, 0));.

73reactions

macmenakcommented, Nov 7, 2018

To make it work globally you can use the built-in next.js router event listener: Router.events.on('routeChangeComplete', () => { window.scrollTo(0, 0); });. Just place this in a component shared across all pages e.g. the header.

Top Results From Across the Web

react-router scroll to top on every transition - Stack Overflow

It works but it not handling back behaviour. I means when go back to previous page, previous page also load from the the...

Scroll Behavior | Vue Router

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of...

How to make your page scroll to the top when route changes?

Now go to your react-router-scroll folder by typing the given command in the terminal. Required module: Install the dependencies required in ...

Nuxt.js | How to retain Scroll Position when returning to page ...

This requirement gave me a problem: $router.replace doesn't trigger the popstate event, so keeping scroll position does not work, and the page always...

router.push scroll: false not working! : r/nextjs - Reddit

Whenever I changed the url of the query I also did focus the input on the page. If you have scrolled down and...