Page not scrolling to top when route changes in Nuxt JS - vue.js

Question

I'm trying to always go on the top of the page when route changes with Nuxt.
So I've put this into my app/router.scrollBehavior.js file:
export default function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
But it always returns to the last saved position (which is always null in my console by the way).
Any idea of what I could miss here?

Answer 1

For Nuxt v3.0.0-rc.3
Create file named route.global.ts on middleware/ folder
Then write this in file:
export default defineNuxtRouteMiddleware((to, from) => {
if (to.path !== from.path && process.client) {
window.scrollTo(0, 0)
}
})

Answer 2

I use Nuxt 3 (npm:nuxt3#3.0.0-rc.4-27588443.cf25525), none of the solutions work for me.
Finally this works:
/plugins/scrollToTop.js (any filename will work, just put it in the plugins folder)
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.$router.options.scrollBehavior = async (to, from, savedPosition) => {
if (to.path !== from.path && process.client) {
window.scrollTo(0, 0);
}
};
});

Answer 3

According to the documentation:
https://nuxtjs.org/docs/configuration-glossary/configuration-router#scrollbehavior
The router.scrollBehavior.js file must be in the app folder, which in turn is in the project's root.
the file should name router.scrollBehavior.js.
You can console.log something in this function and check if it works.

Answer 4

At the end, GSAP was conflicting with OP's scrolling behavior.
Removing it, solved all the issues related to Nuxt, nothing was actually wrong with the router.scrollBehavior.js file.

Answer 5

The top answer is not the correct way of doing it.
Create a file in app directory called router.options.js
// app/router.options.js
export default {
scrollBehavior() {
return { top: 0 }
}
}
With typescript (recommended)
// app/router.options.ts
import type { RouterOptions } from '#nuxt/schema'
export default <RouterOptions> {
scrollBehavior() {
return { top: 0 }
}
}

Answer 6

For Nuxt 3
My solution was to create a file in the middleware folder with the following stucture:
export default defineNuxtRouteMiddleware((to, from) => {
useNuxtApp().hook("page:finish", () => {
if (history.state.scroll) {
setTimeout(() => window.scrollTo(history.state.scroll), 0);
} else {
setTimeout(() => window.scrollTo(0, 0), 0);
}
});
})
and I named it fix-scroll-position.global.ts.
The setTimeout is used to avoid the weird jumping to the top, meaning that the user won't see the page scrolling to the top.
This snippet ensures that the page scrolls to the top when the routes change, and that the scroll position is kept when the back button is clicked. The last functionality is achieved using history.state.scroll, that checks if there is a scroll position saved from the previous route.

Answer 7

I don't have enough reputation for a comment, so therefore an answer. A simple note, but I think it may help some.
I struggled with this as well and nothing worked, but after a while I found out the culprit. My layout looked like this
<template>
<div id="page" class="flex flex-col h-screen overflow-scroll bg-white">
<Navbar />
<slot />
<Footer />
</div>
</template>
That div around the components has the height of the screen and the page content scrolls in that div, but therefore the window is always at the top and you won't see any scrolling when clicking on NuxtLink.
I use nuxt 3.0.0 and when I let the #page div grow with the content (ie. removing the h-screen and overflow-scroll tailwind classes), it has the scroll to top behavior even without the solutions from above.
So, if you have this problem with the stable nuxt 3 version, check your html.