different default scrollBehavior that resets page scroll on navigation

[fanckush]

Environment

- Operating System: `Darwin`
- Node Version:     `v17.3.1`
- Nuxt Version:     `3.0.0-27369360.33ebb01`
- Package Manager:  `yarn@1.22.17`
- Bundler:          `Vite`
- User Config:      `vite`, `ssr`
- Runtime Modules:  `-`
- Build Modules:    `-`

Reproduction

No reproduction needed imo

Describe the bug

When navigating using a <NuxtLink to="/othePage" /> the page scroll is not resetting.
In other words, the page does not scrollToTop on route change

Additional context

No response

Logs

No response

[rnotorni]

It may be solved by installing a plugin for router.

#12732

[fanckush]

@K-Honkawa thanks! i'll try that but the default behaviour should be to reset the scroll so i'll keep this open as a bug

[rnotorni]

I don't think this is a Nuxt3 issue as NuxtLink is RouterLink in vue-router and the behavior that doesn't scroll to top is the default behavior of vue-rouer.

https://github.com/nuxt/framework/blob/c80870ad8c4a1c1b044d7a5ae27e41e997f8a75f/packages/nuxt3/src/pages/runtime/router.ts#L20

[fanckush]

That could be the case but it is possible that NuxtLink extends RouterLink and overrides its behaviour

[daver987]

Any news on this issue, or is there a quick fix to get pages to scroll to top on page change. :)

[danielroe]

@daver987 See above: #13284

[daver987]

Ah ok, I saw the comment but missed the link. Awesome thanks! Greatly appreciated! :)

…

Sent from my iPhone On Jan 31, 2022, at 08:30, Daniel Roe ***@***.***> wrote:  @daver987<https://github.com/daver987> See above: nuxt/nuxt#13284 (comment)<#13284> — Reply to this email directly, view it on GitHub<#13284>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AUIQIWV62HCEPNOZ7WUNRX3UY2FGPANCNFSM5MKZCUEA>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[jamaluddinrumi]

and in case you wanna add a bit delay, you can check it out

https://github.com/nuxt/framework/discussions/1661#discussioncomment-2159828

[danielroe]

This is now configurable with nuxt/framework#3485. See https://v3.nuxtjs.org/docs/directory-structure/pages#router-options for documentation.

[fanckush]

@danielroe awesome! this should replace the workaround mentioned above #13284
but if my understanding is correct it doesn't fix the default behavior which is originally described in this issue. If that's the case then I won't close this just yet

[Bodokh]

I tried adding a plugin do change the scroll behavior like so:
export default defineNuxtPlugin((nuxtApp) => { nuxtApp.$router.options.scrollBehavior = () => { return { left: 0, top: 0 } } });

Works when running "nuxi dev"
But when running using "nuxi build" and "nuxi preview" It does not work.

[richgcook]

What is slightly undesirable about the router.options.ts option is that when using page transitions, you see the scroll to top on the current page before the current page fades out, for example. I'm wondering if there's an option to connect this with specific page transitions so it jumps to the top of the page as the current page has faded out but but the new page fades in.

export const usePageTransitionConfig = {
	mode: 'out-in',
	appear: true,
	css: false,
	onEnter(el, done) {
		loaderStore.value.isActive = false
		gsap.fromTo(el, {
			autoAlpha: 0,
			duration: 0.5
		}, {
			autoAlpha: 1,
			duration: 0.5,
			onComplete: done
		})
	},
	onLeave(el, done) {
		loaderStore.value.isActive = true
		gsap.fromTo(el, {
			autoAlpha: 1,
			duration: 0.5
		}, {
			autoAlpha: 0,
			duration: 0.5,
			onComplete: done
		})
	}
}

[fanckush]

heads up, the PR nuxt/framework#3851 just got merged 🎉

[danielroe]

This should be resolved in the edge channel, or in the next RC.

Let me know if not and I'll reopen.