NuxtLink retains scroll position

[chrisnoden]

Environment

• Operating System: Darwin
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.7
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: build, buildModules, css, googleFonts, modules, nitro, runtimeConfig
• Runtime Modules: @storyblok/nuxt@4.1.0
• Build Modules: @nuxtjs/tailwindcss@5.3.1, @nuxtjs/google-fonts@1.3.0

Reproduction

<NuxtLink :to="/page2">Link</NuxtLink>

Describe the bug

If you have reasonably long pages and common links near the bottom, clicking a link loads the target page content, but the scroll position no longer goes to the top of the new page.

Additional context

Reverting to rc.6 reverts the behaviour to the expected "jump to top of new page".

Logs

No response

[BenjaminOddou]

Did you check the app/router.option documentation ? You can change the scrollBehavior by creating a config file app/router.options.ts :

import type { RouterConfig } from '@nuxt/schema'

// https://router.vuejs.org/api/#routeroptions
export default <RouterConfig>{
  scrollBehavior(to, from, savedPosition) {
    // always scroll to top
    return { top: 0 }
  },
}

Alternatively why not trying to create a plugin like a plugins/router.ts file :

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
    // always scroll to top
    return { top: 0 }
  }
})

[chrisnoden]

Thanks @BenjaminOddou I will give it a try.

However, the normal (globally accepted) response in a browser when clicking a link without a # reference, would be to show the top of the new page. I would therefore consider this to be the default requirement and as such consider rc.7 to have a bug. Downgrading only nuxt to rc.6 and the bug goes away.

I should not have to configure anything to achieve the normally expected behaviour when navigating to a new resource.

[danielroe]

Would you provide a reproduction? 🙏

[Barbapapazes]

Hello,

Using RC-6, I have the same issue.

Go to https://le-classement.fr/, scroll to the first En savoir plus and then, the scroll stay at the same level and don't go to the top. Same for the footer links.

Repo is here: https://github.com/barbapapazes/le-classement.fr

[jshimkoski]

Here is a solution that checks for saved position and hashes, defaulting to scrolling to the top of the page.

app/router.options.ts:

import type { RouterConfig } from '@nuxt/schema'

// https://router.vuejs.org/api/#routeroptions
export default <RouterConfig> {
  scrollBehavior(to, _from, savedPosition) {
    return new Promise((resolve, _reject) => {
      setTimeout(() => {
        if (savedPosition) {
          resolve(savedPosition)
        } else {
          if (to.hash) {
            resolve({
              el: to.hash,
              top: 80
            })
          } else {
            resolve({ top: 0 })
          }
        }
      }, 100)
    })
  }
}

You might not need the setTimeout anymore, but I haven't tested thoroughly without it.

[chrisnoden]

Thanks @jshimkoski - a useful bit of code.

However, as already mentioned, we shouldn't have to write a hack for this. The default functionality when clicking a link to a new resource is to show the resource from the top. This is a bug in Nuxt rc 6.

[chrisnoden]

Not fixed!

Still seeing this unexpected problem in rc8

[manniL]

Not fixed!

Still seeing this unexpected problem in rc8

Please attach a minimal reproduction (e.g. via CodeSandbox or StackBlitz) so it is easier to tackle the issue ☺️

[chrisnoden]

Here's a minimal project to demonstrate the issue @manniL

https://github.com/chrisnoden/nuxt3-bug

Here is a video of what happens:

Capto_Capture.2022-08-16_05-18-29_pm.mov

[chrisnoden]

Would you provide a reproduction? 🙏

Reproduced in a minimal project above @danielroe

[anjali89r]

@danielroe is this addressed in RC-9, RC-8 had the issue.

[silvio-e]

It still happens for me in RC-9.

And in combination with #14005 it's quite a faulty navigation experience atm..

[cfab]

Same here with RC-11 for information

[danielroe]

Let's track in #13284.

[Nvironmental]

Can confirm this issue still persist as of RC-12

[danielroe]

It is resolved in the edge channel, or in the next RC.

[richgcook]

It is resolved in the edge channel, or in the next RC.

Can you confirm what exactly the resolution is? What's the default? What happens?

[danielroe]

nuxt/framework#3851

[chrisnoden]

I've updated to rc.13 and this bug is not resolved for me.

[danielroe]

@chrisnoden Please do raise a new issue with a reproduction. 🙏

[chrisnoden]

@chrisnoden Please do raise a new issue with a reproduction. 🙏

done as #15356 🤞