00:00 So we need scroll restoration to happen automatically for us, and we're going to use the scroll restoration component from Remix Run React. So bring in scroll restoration, and this is going to control and keep track of our scroll position as we're navigating around. So once we navigate to another place,

00:18 then the scroll restoration component will just keep track of where we were scrolled at that location. So if we go back or when we go forward, we can always make sure that we're being placed at the right spot in a way that emulates the way the browser works by default,

00:35 and so presumably, it matches what our user expectations are. So just by adding that, that takes care of our problem. I can scroll down here and click on Epic Notes, that sticks me up at the top of the page, just like I would expect. I can go over here, go to Notes, and I'm back up at the top of the page. Go scroll down a little bit,

00:53 go to Cody's Notes, back at the top of the page. I can click on this, and I'm at the top of the page there. Again, that's not what we wanted. We want to remain where we are, so prevent that default behavior. But if I click on Edit, I am scrolled to the top of the page. That's what we wanted there.

01:13 So how do we make it so that we scroll to the right position by default with the scroll restoration, but then avoid or prevent that scroll reset for some specific links? Well, let's go find those links. It should be under Notes right here. We have this nav link, that's these links on the side.

01:33 So if I say prevent scroll reset right here, now navigating between these does not or should not, once I get that code, should not load me up or shoot me up to the top of the page. That's the expected and desired behavior here. But then if I click on Edit,

01:51 that sticks me up to the top of the page. So I'm getting the behavior that I want, and I have a lot of control over my scroll restoration, which is stellar, and that's exactly what our users are looking for.