Loading
Current section: Scripting 7 exercises
Problem

Page Navigation with Scroll Behavior

Transcript

00:00 Now that we have JavaScript on the page, there are a number of things that the browser was doing for us before that it's not doing for us anymore. And one of those is when you navigate and click on different links, the browser is going to do a full page refresh, and it's going to stick you at the top of the page. And that is no longer the case, because we're updating the URL. And so the browser doesn't know when to scroll you

00:19 to the top of the page. So you'll notice when I navigate between these, then we're actually not scrolling up to the top of the page. That's actually desired behavior. I think that kind of makes sense for the way that this UI is designed. But if I click on Edit, I kind of think I should scroll up to the top of the page here.

00:37 Or another example, if I click on Epic Notes right here, I kind of feel like I should scroll up to the top of the page there. Or if I scroll down a bit and I click on Cody's Notes, again, I feel like that's a case where I should scroll up to the top of the page. So most of the time, we actually do want to be scrolled to the top of the page

00:55 as we're making these route transitions. But there are some times where we want to opt out of that behavior. And so let's switch things to have a default where we automatically scroll every time we navigate. And then we'll opt out of that particular behavior for these links because it makes sense

01:11 to stick with where we're at for this particular user experience. So luckily for us, Remix has a utility for us to use to handle this automatically. So I want you to use that utility and make this experience better.