Sign up to access "Build a Forum with Inertia and Laravel" right now.

So if we head back over to the page one on page two, let's just add a few more replies to this. So we'll just create a bunch of replies here. Just so we've got a little bit of room to scroll. OK, so yeah, let's go and just delete that last post just so we scroll all the way to the bottom of the page.

Because we don't want to roll over into the next page or we're not going to get the opportunity to see this scroll down. OK, so we're going to go ahead and use the ViewScrollTo library, which is incredibly easy to use. Let's go ahead and install this first of all, and then I'll walk you through how we're going to use this. So let's pull that in and we are first of all going to pass through the post ID down to this component via a prop.

So let's come down to here and let's set post ID here. And very simply, we're just going to cast this to an integer from the request. Grab the post ID now over in the discussion show component. Let's go ahead and accept that into here as a number.

And then what we can do is create some sort of trigger to scroll to this post. Now, when do we want this to happen? We want it to happen when this whole page is mounted, but we also want it to happen when this page is potentially updated as well. For example, if we edit a post or we do anything else, we want this to always scroll down if it has the post ID in there.

So to do this, we're going to go and import. We don't look like we have any imports from Vue at the moment. We're going to import on mounted and on updated from Vue. And we're then going to go down and define this out.

This is just one of the Vue lifecycle hooks. And then in here, we're going to check if we have a post ID within our props. And then we're going to go ahead and scroll to that. So let's just try this out first.

I'm going to do a little bit of refactoring just to make this a little bit cleaner. So if we don't have within our props a post ID, and let's just make sure we are assigning that here, then we're going to just go ahead and return. So if there's no post ID, we don't want to do anything. Now, if that is the case, we want to import the Vue scroll to library.

So let's pull that in from Vue scroll to. And we're going to go ahead and use this to scroll down the page. So we're going to say Vue scroll to, scroll to, and then we're going to pick the element. Now, we know that this is a ID.

So we're going to use a hash and it's post hyphen and then the post ID. Remember, we added that to the post component just over here. Okay, so post and then it will be props.post ID. And then in here, we can give a couple of options.

There are loads of options we can use for this library, but we're going to use the amount of time this is going to take to actually scroll. And then we're actually going to set an offset to this because we don't want the top of the post to be at the very top of the browser. So we're going to get set an offset here of minus 50 pixels. Okay, so if we come over now and we hit this page, nothing's actually happening at the moment.

Now, the reason for that is that we're not giving Vue a chance to go onto the next render to actually do this. So the page is being mounted and we have that on mount firing. We can prove that by just going ahead and console logging out mounted here. So that is actually working if we bring up our tools here.

So that is being mounted, but it's not quite catching the element. So to do this, we're going to use next tick. So let's go ahead and pull in next tick from Vue. And if we just wrap this in here, that's going to wait for the next render to then find that element and go ahead and scroll down to it.

So let's go over to this page, hit this, and this isn't actually on the page at the moment by the looks of it. So let's see what we've got here. Post 22 should be this one. OK, yeah. OK, so we're trying to scroll to post 22, which is the one that we deleted. Of course, that's not going to work. Let's scroll to 21 and you can see it worked.

So no matter how many times I refresh this page, it's always going to go ahead and scroll down. So we have the latest post in Vue. So that's working really nicely. But what we're going to do is just tidy this up because we want this to happen on update as well. So if we just grab all of the code that we've used here and we move this over to another method or a function, let's call this scroll to post.

Kind of makes sense. And we're going to accept the post ID into here and then we can just swap this out. And that just means that we can call this from multiple places. So that's now going to be the post ID here and we should be good. So now on mounted, we're going to scroll to the post with the props post ID.

And when the page gets updated. Then we're going to do the same thing. So that should have exactly the same effect if we just refresh the page. You can see we're scrolling down. So the scroll is quite quick. But just to demo this, if we bump this up to five seconds just to be a little bit silly,

you can see that it does actually smoothly scroll down to the post that we want. We'll leave that at 500, though, because I think that works really nicely. So now what's happening, if we count how many posts we've got on this page, we've got four. So if we were to go to page one and just sort of view this topic as we were landing on it,

we wanted to post a reply here and just say new reply. When we reply, we're going to be jumped over to the second page, but also be scrolled down so we can see the new reply. So I think this is all working nicely now. And it's exactly what we do expect from a user experience point of view.