scroll behaviour not working in Nuxt3 Application

Question

I am facing issue with scroll behavior in my Nuxt3 project when using nuxt-link.

The problem is that if I visit any page from my current page using <nuxt-link>, that page scroll position is similar to what I had in previous page.

But I expect that page scroll position to reset to top when I change pages.

I followed some answers by @kissu at https://stackoverflow.com/a/68819388/17473694 but none of them seems to be working.

currently I have

/plugins/route.scrollbehaviour.js

import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

My Package.json ( for any conflict )

{
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^5.3.0",
    "nuxt": "3.0.0-rc.6",
    "nuxt-lodash": "^2.2.0",
    "nuxt-schema-org": "^0.6.2",
    "unplugin-vue-components": "^0.21.1"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.1.0",
    "@mdi/js": "^6.7.96",
    "@nuxtjs/device": "Redemption198/device-module",
    "@pinia/nuxt": "^0.3.0",
    "@tailwindcss/typography": "^0.5.2",
    "ant-design-vue": "^3.2.10",
    "date-fns": "^2.28.0",
    "mdi-vue": "^3.0.13",
    "pinia": "^2.0.16",
    "primeicons": "^5.0.0",
    "primevue": "^3.15.0",
    "vant": "^3.5.2",
    "vue-uuid": "^3.0.0",
    "vue3-carousel": "^0.1.40",
    "vue3-google-login": "^2.0.11"
  }
}

after removing every UI package when it wasn't working, now i find whats causing this error. I have added following CSS in layouts/default.vue. if i remove this css then things works fine. but i added this to hide extra horizontal white space in mobile view.

<style>
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
</style>

this fixes problem somehow.

<style>
html, body {
  max-width: 100%;
  overflow-x: clip;
}
</style>

`scrollToTop` is not (yet) supported in Nuxt3. Meanwhile, you could still try to apply the changes to the router as shown here: https://v3.nuxtjs.org/migration/component-options/#scrolltotop Also, it's a bit strange that it doesn't go to top by default. Do you use GSAP or any other library that may conflict with Nuxt maybe? — kissu, Jul 20 '22 at 11:09
No I don't use GSAP. I have updated the question with package.json, that is all i am using in my project. — imthegrv, Jul 20 '22 at 11:13
Hm, maybe it's coming from PrimeVue but I'm not sure. Or vant (never heard of that one tbh). You have ant-design-vue + tailwind at the same time too, damn! Maybe try to set the configuration as told in my previous comment, otherwise maybe try to reproduce it without any of those UI frameworks. Add one at a time and you should know if they are the culprit or if the behavior is coming from a vanilla Nuxt3 app. — kissu, Jul 20 '22 at 11:17
I have updated question with what is causing that error in my project. if i remove this css then it works fine. — imthegrv, Jul 27 '22 at 09:45

score 2 · Answer 1 · edited Sep 12 '22 at 22:33

The solution is to create a plugin that listens for when page load is complete then scroll to the top.

Step 1: Create file plugins/scroll.ts

Step 2: Copy the following code

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:finish', () => {
    console.log("Page finished loading..");
    window.scrollTo(0, 0);
  })
})

Not sure if this is the official way, but it will solve your issue.

score 2 · Answer 2 · answered Nov 15 '22 at 15:03

Based on Nuxt3's docs

You can tap into the RouterConfig in the /app/router.options.ts file.

import type { RouterConfig } from "@nuxt/schema";

export default <RouterConfig>{
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else {
            return {
                top: 0
            };
        }
    }
};

scroll behaviour not working in Nuxt3 Application

2 Answers2

Based on Nuxt3's docs