Open brillout opened 3 weeks ago
@brillout Usually in other metaframeworks there's two ways to navigate:
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.
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
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
Do they also scroll to the top by default for nested layouts? I'm thinking of not scrolling nested route navigation by default.
@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
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.
Actually, a new setting scroll: false
could be a much simpler DX. I'll think more about it.
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?