Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
12. Preserving page scrolling

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
We're now going to talk about preserving page scrolling, which is probably something else you're always going to use when you are submitting data through.
00:08
Now, just to demo this out, if I scroll down slightly and I hit post, notice that we're bumped to the top of the page. Now, that is standard behavior when you're working with any other app. Your browser will always bump you to the top of the page when you're redirected back to a new page.
00:25
But since we're working with a single page application here, it's probably likely that when we hit post here, we don't want this to the jump to the top of the page because we're technically not making a new request. So how do we get rid of this behavior?
00:40
This doesn't just apply to forms, it replies to any request within Inertia that includes going between pages as well. We'll talk a little bit about that later, but typically we'd apply that to a form. So I mentioned that you can pass a list of options through when you post a form.
00:58
We've used the on success callback here, but there are a bunch of other options that we can pass in here as well. And one of them, and one that you're going to use most often, is preserve scroll. By default, this is false. But if we swap this out to true, that's going to keep the same position after this request gets sent to the back end.
01:15
So let's just try this out. I'm going to scroll down, hit post, and you can see we've stayed in exactly the same place. Now, you might not want this functionality, but most of the time, particularly if your forms are much further down the page,
01:28
you're not going to want the bump to bump the user all the way to the top, particularly when you are showing validation errors like this. So we're going to explore later on in the course other places that preserve scrolling can be used. But for now, that is a really quick tip on something that you're going to use a lot within Inertia.

Episode summary

In this episode, we dive into a common annoyance with web forms: when you submit a form on a long page and suddenly find yourself jolted back to the top. This is the default browser behavior, especially when a new page loads, but in single-page applications—like the ones you build with Inertia—it doesn't always make sense.

We'll kick things off by demonstrating the problem. If you scroll down a bit and hit the post button, the page defaults right back to the top. Not ideal! We talk through why this happens, and why you'll usually want to keep the user's position on the page, especially if your forms or important content aren't right at the top.

The fix is easy: Inertia provides a handy preserveScroll option you can pass when you submit your forms. By setting this to true, it keeps the user's scroll position after the form is submitted—super useful when showing validation errors or when your page is lengthy.

We'll also briefly mention that this option isn't just for forms; you can use it with other types of Inertia requests too. We'll go into more situations where it's helpful later in the course, but for now, this is a simple and practical trick you'll be using a lot to improve your app's user experience.

Episode discussion

No comments, yet. Be the first!