and select that hash, and that will give me the node. But also, you may not know, in Google Chrome, you can use a jQuery like syntax. So if I did this, I'm going to get the exact same thing. But do know, this isn't a jQuery selector, it's just a $ helper function that Chrome provides when you have tools open. But anyways, you may not know that there is a method called scrollEndView. So if I run that, it instantly scrolls that element corresponding to the hash into view. But if you knew that, what you may not know is you can provide options in browsers.

the boilerplate we're starting out with. So we have this anchor tag, and we want it to link to the category section, which I've added right down here. OK, so again, at the moment, if you click on it, it takes you there directly. OK, now let's make it animate. So I already have Vue installed. In fact, this is a fresh Laravel instance. We're not going to be really using Laravel too much, but just to make it familiar and to give us a webpack build ready to go out of the box with Laravel Mix, we're going to use that as our base. So that means if I go to my app.js file, you'll see that we require Vue, or import it, and then we instantiate Vue and bind

to my app.js file, you'll see that we require view, or import it, and then we instantiate view and bind it to the element with an id of app. And you'll see that's right here. Alright, so that means within here, I have access to view. OK, well we might just start by saying when you click on this, prevent the default action. So I don't want you to instantly go there. I want to scroll there myself. And we could say scroll to categories. Add a little helper function there. OK, so let's switch back here. We're going to add a new method, and then we're going to refactor. So we'll accept the selector, and I'm just going to do exactly what we had earlier.

here. We're going to add a new method, and then we're going to refactor. So we'll accept the selector, and I'm just going to do exactly what we had earlier. Track down the selector in question, and then run scrollIntoView, and then provide the behavior of smoothing. OK, does that all make sense? So now when you click on this anchor tag, we're going to prevent the default action, and instead we're going to call a function scrollTo. That scrollTo method will track down the selector in question and scroll it into view with a smooth behavior. So let's give this another shot. I'll give it a refresh, and if I click on this, sure enough, we get the same thing as before.

going to scroll back up. OK, so this in fact works no problem at all. However, I'm relying on a method that is defined on our main root level view instance. So later, if I'm in a dedicated component, I'm not going to have instant access to this method. So instead, I think this is a good use case for a very, very simple view component. Let's do that now. So in my resources/components directory, I'm going to create a new one here, and we'll call it, and what is it? It's something like a scroll link, a link that scrolls to where you direct it.

and we'll call it, and what is it? It's something like a scroll link, a link that scrolls to where you direct it. Now, here, we know we're going to have a method called scroll, right? But next, I need our template. So I'm going to switch back here, and we know it's going to look something like that. So I will paste that in here, and then we'll say, OK, well, we need to know where this thing is scrolling. So let's accept that as a prop, and we'll stick with href, or href, and then we'll bind it. Even though, in this case, it's not even overly necessary because we're going to hind check it anyways. But nonetheless, just to keep it consistent.

bind it. Even though, in this case, it's not even overly necessary because we're going to hind check it anyways. But nonetheless, just to keep it consistent. The class, I don't want to hard code anything like that, so I will remove that. But then when you click on this anchor tag, we will simply call a method scroll. Finally, the body here can just be whatever you define outside. So we'll add our main slot there. OK. So the only remaining step is, if I switch back here, I can take this bit of code that we wrote earlier and paste it in. Now, track down the selector. We're calling it href here, but you can name that anything you want. And then we'll call scroll in the view. And that's what we have.

the selector. We're calling it href here, but you can name that anything you want. And then we'll call scroll in the view. And that's what we have. So if we make that change, we can now clean up our root view instance, which I'm always a fan of, because the reality is, for any long-running project over years, things like a User model or a top-level view instance, they are the first ones you abuse when you need to throw logic. So it's really important to keep them as clean as possible. Anyways, I can now remove this like so. The only remaining step is to register it. So we called it scrollLink. I'm going to make this global, and then we'll import it like so. And that's it.

is to register it. So we called it scrollLink. I'm going to make this global, and then we'll import it like so. And that's it. So now take a look here. I can now change this to scrollLink. Now the href is still going to be to that categories section, and then we'll say go to testimonials. And we have something like that now. Alright, so let's see how we did. I'm going to come back and give this a refresh. We've lost some of our styling, so we'll bring that back in a minute. But if I click on it, sure enough, we get the exact same thing. Alright, so now here's another tip. If I add a class here of text

exact same thing. Alright, so now here's another tip. If I add a class here of text-blue-500, something like that. As a quick note, I'm using Tailwind, just through a CDN, because I don't need to modify it. But yeah, anyways, if you provide any attributes to a view component and those attributes aren't defined as props, well, they'll just be inserted at the top-level element. Which means I'm providing what looks like a class prop, but it's not a prop. It's a typical HTML attribute. So we're going to essentially add it right here when it gets rendered. Alright, so anyways, if I give

But yeah, that'll now work anywhere. So click on it, and we go right back up. So very little code at this point to have nice, smooth scrolling in modern browsers. Now, a quick note, I consider this a nice form of progressive enhancement, because if it doesn't work in an older browser, or even in things like Safari, it's really not a big deal, because they're still getting where they need to go. They're only sacrificing a little bit of animation there. But nonetheless, if you want to add polyfill support, you can look for smooth-scroll. That's what I believe it's called, and I can't remember which one is best. Maybe this one. smooth-scroll-polyfill.