Voiceover: Welcome back.
Let's use some more jQuery.
In this lecture,
we'll use it to create some scrolling effects.
So, there's two things that we need to do.
First, we need to define
what happens when he hit these buttons,
because so far they don't do anything at all.
And then what happens when we hit
these navigation buttons right here, right?
So let's start with the easier ones, which are these two.
So this is the main call-to-action button
and so we want this to scroll to the most important section,
which is the pricing plan section.
So this will go all the way down
to this section here
where a user can then make an action,
which is signing up for one of these plans.
And the second one, Show Me More,
will just scroll down here.
So we'll start doing that.
And in jQuery that's actually pretty straightforward.
Let me just comment my code here
so that when I come back later I don't get lost with this.
So this is for
the sticky navigation.
And now
scroll on buttons.
Alright, and this is actually pretty forward.
So first up we need to define some classes
for each of those buttons so that we can then select them.
And we need a unique class for each of them.
And as before,
we want to have a name only for the jQuery.
So I will call this one
scroll-to-plan.
Because this way when we look at this class name,
we know exactly what should happen.
Scroll-to-start.
Okay, great.
So copy this one.
And so, maybe you can already guess what happens now.
So I will select this,
and then I will say click
and this defines what happens when we click on that button.
So function of this is actually always the same.
So, now this is a little bit strange
because in order to make the animated scroll,
we need to select HTML and body.
And then we use the animate method.
And like this,
so scrollTop
and now we select the section where we would want to go to.
Again, all of this is maybe a little bit weird.
You don't have to understand exactly what goes on here,
just make sure that you understand
the basic way that we use jQuery.
So now we need to select the section.
And the first one is the plans.
And as before I will
use a special
class name,
section-plans.
And we can just do the same for
this one here.
And we already have it, okay,
so we don't have to define it here.
So, let's select that,
section-plans.
And then offset
and top.
And the other value we need for the animation is the speed.
And we will say 1,000 milliseconds, which is a second.
So, again what happens here, we select this class,
and when we click on it this happens.
So we have an animation,
which scrolls to the top of the
js--section-plans section with a speed of one second.
Here we go.
Alright, here we are,
and this is cool, right?
So it is a nice effect.
I'm going to show it to you again.
Alright, and now let's do the same thing
for the other one.
So I'll just duplicate this here.
Don't want to write it all over again.
So this is scroll-to-start
and now this is section-features.
Hopefully this works as well, and yeah it does.
So here we are.
So this was pretty easy.
Next up, we need to make sure that
each time we click on one of these links,
we actually get to the section that we want.
Now as I told you before,
we many times use JavaScript plugins
in order to do some stuff,
or you can just Google for some jQuery snippets,
which is like code that someone else writes
and that you can then use in your website.
And we will now do that,
'cause we don't always have to write
everything from scratch.
We can use something that someone else used.
So in this case I found this little script here.
And we will use that to do exactly what we want
with that navigation.
So, Navigation scroll.
Let me just copy this to this place here.
And now how do we make this work?
First, we need to go back to our HTML navigation
and define some anchors.
And anchors are like this.
We write this hash symbol, and then we define a name.
So food delivery here will be for the features.
And then we come here and define an ID
with that exact name.
And so now this is an anchor
to this here.
And this should actually already work, so let's check this.
Okay, I click here,
and yeah, it takes me exactly to the place that I want to.
Fantastic.
So now let's repeat the same thing for the others as well.
Because these two of course, not work yet.
So this one will be works,
this one will be cities,
and this one will be plans.
So this is the meals one and this is the works.
So ID
and just works.
Then the same for cities.
And now for the plans as well.
ID, plans.
And I guess now, all navigation is ready to work.
So let's start by clicking here, Sign Up.
And it takes us exactly to the place we want.
And now Cities, and How It Works, and Food Delivery.
Okay, fantastic, exactly what we want.
And so now you see how useful
it actually is that this navigation bar
always stays on top of everything, right?
So this is really quite useful.
We can just click everywhere we want,
and it takes us to the exact place.
So let's just look at this code
so that we can understand what happens here.
So basically what this says is to,
it selects the link element where the href attribute
starts with an hash symbol.
Then we click it,
and this is not too important there,
basically what happens then
if that element exists,
then we scroll to it.
And this is actually
the same kind of code we used up here, right.
So we select the HTML body, we animate it,
and then we scroll to the top of the section,
and also in one second.
We could of course change this,
make the animations faster or slower,
but one second is kind of cool.
So, now we know how to write some code on ourselves.
We know how to use code from someone else.
And we even used a small plugin.
And so in the next section, we will use one more thing,
and this will be animations on scroll.
And I'm sure you will like that as well.