People searching “Inertia preserve scroll” lose their place every time a search box reloads the list. The CRUD guide already passes preserveScroll on that filter. This page is the same option on a save that redirects back to a long page.
TL;DR
- preserveScroll stops a filter or a save from jumping to the top of a long Vue page.
- Do not use it for a “next page” link.
- Do not add a second router to do it.
- Do not turn on
html { scroll-behavior: smooth }and then expect a test to see the final position immediately.
The fix#
form.post(`/posts/${post.id}`, {
preserveScroll: true,
});Inertia follows the redirect and then scrolls to the top, unless you say otherwise. preserveScroll: true keeps the window where it was. Use it for a row action on a list. Do not use it for a “next page” link. The next page should start at the top, and <Link> does that by default.
There is a second scroll: a layout with overflow: auto on a div. preserveScroll tracks the window, not that div. If the list lives in a nested scroller, keep that element’s scrollTop yourself. Do not add a second router to do it.
What to avoid#
Gotcha
Do not turn on html { scroll-behavior: smooth } and then expect a test to see the final position immediately. The site you are reading does that. A product app can make the same mistake in a browser test.
FAQ#
How do I keep the scroll position on an Inertia visit?
preserveScroll stops a filter or a save from jumping to the top of a long Vue page.
What goes wrong with Inertia preserve scroll?
Many developers lose their place every time a search box reloads the list. Do not use it for a "next page" link.
