[Filesystem Routing] Nested routes with sticky scrolling

[brillout]

Description

By default Vike scrolls the page to the top upon navigation.

The idea here is that the user would define /product/@id/%view (or /product/@id/@@view/) instead of /product/@id/@view to tell Vike that the page shouldn't scroll to the top.

Edit: Actually, a new setting scroll: false could be simpler.

@Blankeos In Next.js (and other frameworks) how does the user control whether the page scrolls to the top?

[Blankeos]

@brillout Usually in other metaframeworks there's two ways to navigate:

• Link (In the Markup)
• Programmatically using a similar navigate API with Vike.

By default, the other metaframeworks work exactly like in regular HTML anchor tags wherein both approaches cause a scroll up to (0,0) scroll position. You can pass an optional prop/attribute to change that.

In NextJS:

• Link: <Link href="/my-page" scroll={false}>My Page</Link> API Reference: https://nextjs.org/docs/app/api-reference/components/link

• Programmatically: router.push(href:'/my-page', { scroll: false }) (useRouter hook) API Reference: https://nextjs.org/docs/app/api-reference/functions/use-router#userouter

In SvelteKIt:

• Link: <a href="/my-page" data-sveltekit-noscroll>My Page</a> API Reference: https://kit.svelte.dev/docs/link-options#data-sveltekit-noscroll

• Programmatically: goto("/my-page", { noScroll: false}) API Reference: https://kit.svelte.dev/docs/modules#$app-navigation-goto

[brillout]

Do they also scroll to the top by default for nested layouts? I'm thinking of not scrolling nested route navigation by default.

[Blankeos]

@brillout Just tested here, yup they do scroll to the top by default even for nested layouts.

Repro: https://github.com/Blankeos/nested-layouts-scroll-example

https://github.com/vikejs/vike/assets/38070918/02769da3-14af-434e-b4d3-9b893dfe9f30

Also tested "no scroll" while I'm at it:

https://github.com/vikejs/vike/assets/38070918/7bbfdeb2-5ab5-4827-b22a-766b22ed09c9

[brillout]

Actually, I don't know whether a nested route should induce a scroll-to-the-top or not. Some nested layouts require a scroll while others don't, and I'm not sure which is more frequent. I'd suggest we stick to always scrolling by default.

I think this ticket largely does the trick, with a much better DX than Next.js and SvelteKit.

As always, feel free to disagree.

[brillout]

Actually, a new setting scroll: false could be a much simpler DX. I'll think more about it.

[brillout]

Implemented by https://github.com/vikejs/vike/pull/1853.