Next.js Discord

Discord Forum

Go to top of page on browser refresh?

Answered
Chausie posted this in #help-forum
Open in Discord
ChausieOP
I can I set nextjs so that when I refresh my browser (pressing F5) the page fully refresh and starts again from the top of the page? at the moment, when I refresh the browser, the page refreshes but the current scroll location is maintained. I want it to refresh I begin from top like it was on the first load. Please help! I’m using app directory!
Answered by B33fb0n3
you can also create a client comp with a useEffect Hook and set the scrollRestoration to manual like window.history.scrollRestoration = 'manual'

After that you can add the scrolling to your useEffect: 
if (input.scroll) {
   console.log('Scrolling to', input.scroll.x, input.scroll.y);
    window.scrollTo(input.scroll.x,input.scroll.y);
  }


Here's a video that show that this code works: [Link](https://user-images.githubusercontent.com/10377391/104229558-6d072600-541a-11eb-90b6-0258b6d98e8e.mov)
View full answer

12 Replies

B33fb0n3
I’ve found a pretty good solution in the following:

router.beforePopState((state) => {
  state.options.scroll = false;
  return true;
});
Let me know if that works for you
@B33fb0n3 I’ve found a pretty good solution in the following: router.beforePopState((state) => { state.options.scroll = false; return true; });
riský
do we have this in app dir router? (im just interested as it looks interesting but i don't remember it)
B33fb0n3
You can access the router via constant router = useRouter() in a client component
riský
yeah but i could only find it in docs for 'next/router' and not 'next/navigation'
so, i was just asking if they forgot to mention it
B33fb0n3
Hm that’s weird. I think I access it in my app. I will check this..
ChausieOP
Hi @B33fb0n3 there is no beforePopState on useRouter() in app directory. In the image attached, I used either one of these statements in an effect and it seems to work, though there is a slight flash of the page loading at its previous scroll position, wish I could get rid of that. Not sure if these are good solutions, could you guide me on that?
@Chausie Hi <@301376057326567425> there is no beforePopState on useRouter() in app directory. In the image attached, I used either one of these statements in an effect and it seems to work, though there is a slight flash of the page loading at its previous scroll position, wish I could get rid of that. Not sure if these are good solutions, could you guide me on that?
B33fb0n3
you can also create a client comp with a useEffect Hook and set the scrollRestoration to manual like window.history.scrollRestoration = 'manual'

After that you can add the scrolling to your useEffect: 
if (input.scroll) {
   console.log('Scrolling to', input.scroll.x, input.scroll.y);
    window.scrollTo(input.scroll.x,input.scroll.y);
  }


Here's a video that show that this code works: [Link](https://user-images.githubusercontent.com/10377391/104229558-6d072600-541a-11eb-90b6-0258b6d98e8e.mov)
Answer
@Chausie 👍
B33fb0n3
Does it work for you?
@B33fb0n3 Does it work for you?
ChausieOP
yes, though it turns out the default functionality of nextjs routing works better for my use case but this is a solution to the question I asked