Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,450 --> 00:00:03,130
In this lecture, we're going
2
00:00:03,130 --> 00:00:07,673
to use JavaScript to implement some nice animated scrolling.
3
00:00:09,240 --> 00:00:12,860
Now, before we can actually animate some scrolling effects,
4
00:00:12,860 --> 00:00:15,330
we first need to implement this scrolling
5
00:00:15,330 --> 00:00:18,200
in the first place in HTML.
6
00:00:18,200 --> 00:00:21,480
So right now, for example, if we click
7
00:00:22,880 --> 00:00:24,483
and let's turn this off.
8
00:00:25,990 --> 00:00:29,300
So if we click, for example, here on one of these links,
9
00:00:29,300 --> 00:00:31,170
then it will lead nowhere.
10
00:00:31,170 --> 00:00:35,837
So it leads to this URL, which has this right here, right?
11
00:00:36,910 --> 00:00:40,240
Because basically we just made it an empty link.
12
00:00:40,240 --> 00:00:42,970
And so what we want of course to happen is
13
00:00:42,970 --> 00:00:46,530
that when we click here, it moves to the meals section
14
00:00:46,530 --> 00:00:48,650
and here it moves to the how it works section
15
00:00:48,650 --> 00:00:50,780
and so on and so forth.
16
00:00:50,780 --> 00:00:54,730
And we can actually do that just using HTML.
17
00:00:54,730 --> 00:00:57,360
It will then not have the animated scroll,
18
00:00:57,360 --> 00:00:59,360
but it will still work.
19
00:00:59,360 --> 00:01:01,720
So let me show you how we can do that.
20
00:01:01,720 --> 00:01:06,580
And I will first do it just with one of these buttons here.
21
00:01:06,580 --> 00:01:09,290
So on this button here, when we click it,
22
00:01:09,290 --> 00:01:14,290
we want it to move to the call to action section, right?
23
00:01:14,350 --> 00:01:17,323
Because that is where we can start eating well.
24
00:01:18,200 --> 00:01:20,880
So let me show you how we can do that.
25
00:01:20,880 --> 00:01:23,923
So let's go to that section, here at the very end.
26
00:01:26,070 --> 00:01:27,570
So this one here.
27
00:01:27,570 --> 00:01:29,623
And now here we need to add an id.
28
00:01:30,680 --> 00:01:32,480
So we're back to using ids,
29
00:01:32,480 --> 00:01:36,270
but this time not to select the element in the CSS,
30
00:01:36,270 --> 00:01:39,963
but really to give this element here, a unique name.
31
00:01:41,210 --> 00:01:45,330
So let's call this one, cta, alright.
32
00:01:45,330 --> 00:01:49,573
And then let's go back up to our link.
33
00:01:51,070 --> 00:01:52,890
So that's this one here.
34
00:01:52,890 --> 00:01:55,640
And so now here in the href,
35
00:01:55,640 --> 00:01:56,903
we can write that here.
36
00:01:58,670 --> 00:02:00,640
So hash cta,
37
00:02:00,640 --> 00:02:05,090
and what we just did here was to create a page anchor.
38
00:02:05,090 --> 00:02:07,673
And so this here is what the anchor is.
39
00:02:08,680 --> 00:02:13,020
So again, cta is the id of the element.
40
00:02:13,020 --> 00:02:17,500
And if we then use that as the href of an anchor element
41
00:02:17,500 --> 00:02:20,140
together with the hash symbol here,
42
00:02:20,140 --> 00:02:23,393
then we will move to that place in the page.
43
00:02:24,350 --> 00:02:25,863
So let me show that to you.
44
00:02:28,440 --> 00:02:30,190
And when we hover over it,
45
00:02:30,190 --> 00:02:35,190
you can already see that URL down there in the bottom right?
46
00:02:35,820 --> 00:02:39,800
So now I'm gonna click and there we go.
47
00:02:39,800 --> 00:02:43,500
So, we just moved automatically here to this section.
48
00:02:43,500 --> 00:02:47,190
And you see that the URL indeed changed to,
49
00:02:47,190 --> 00:02:52,190
or a regular URL and then slash, hash cta.
50
00:02:52,730 --> 00:02:57,730
So if we removed this, then we will go back up, right?
51
00:02:58,020 --> 00:03:02,190
And so now we can do that basically on all our sections
52
00:03:02,190 --> 00:03:03,673
and on all our links.
53
00:03:06,890 --> 00:03:09,130
So, this one here doesn't really need it
54
00:03:09,130 --> 00:03:12,110
because it's just the first section in the page.
55
00:03:12,110 --> 00:03:15,390
And we also don't want any link leading there.
56
00:03:15,390 --> 00:03:18,030
And the same with the featured section.
57
00:03:18,030 --> 00:03:19,630
So there is no link on the page
58
00:03:19,630 --> 00:03:22,950
that should end up here in this section.
59
00:03:22,950 --> 00:03:24,840
So no need for that.
60
00:03:26,607 --> 00:03:29,400
And here I'm simply calling them like a shorter name,
61
00:03:29,400 --> 00:03:32,870
not again, section how, but just how,
62
00:03:32,870 --> 00:03:34,820
and of course any name would work here,
63
00:03:35,800 --> 00:03:37,973
but I'm just doing it like this here.
64
00:03:39,760 --> 00:03:40,823
So meals.
65
00:03:43,790 --> 00:03:48,790
Then the next one is the testimonials, which we also want.
66
00:03:49,840 --> 00:03:51,223
So just copying that.
67
00:03:54,204 --> 00:03:55,960
Then next we have pricing,
68
00:03:55,960 --> 00:03:58,713
which I think is also one of the menu items.
69
00:04:03,620 --> 00:04:08,620
And not class, but id and the cta we already have.
70
00:04:08,770 --> 00:04:11,090
So I think we're good here.
71
00:04:11,090 --> 00:04:13,360
Right, that was the last one.
72
00:04:13,360 --> 00:04:14,710
And indeed it was,
73
00:04:14,710 --> 00:04:19,310
so let's go back up and now here in our menu
74
00:04:19,310 --> 00:04:23,660
let's create or correct anchors here.
75
00:04:23,660 --> 00:04:25,910
So this one is called how.
76
00:04:25,910 --> 00:04:27,750
So, it will now lead to the element
77
00:04:27,750 --> 00:04:29,950
with the id of how
78
00:04:29,950 --> 00:04:32,850
and never forget this, so the hash.
79
00:04:32,850 --> 00:04:35,083
Without this it will not work at all.
80
00:04:36,490 --> 00:04:38,603
Then here meals,
81
00:04:42,150 --> 00:04:43,383
testimonials,
82
00:04:45,940 --> 00:04:50,940
pricing, and finally to try for free is cta now, okay.
83
00:04:53,250 --> 00:04:55,030
And so now maybe it makes sense
84
00:04:55,030 --> 00:04:58,430
why basically an empty link is this one here.
85
00:04:58,430 --> 00:05:00,760
It's basically also just an anchor,
86
00:05:00,760 --> 00:05:04,477
which will simply lead to the top of the page, right?
87
00:05:07,060 --> 00:05:10,040
So it's not really, in fact, an empty link.
88
00:05:10,040 --> 00:05:13,553
It's simply an anchor for the top of the page.
89
00:05:14,870 --> 00:05:19,010
So down here we have that other button here.
90
00:05:19,010 --> 00:05:21,490
So this link that is styled as a button
91
00:05:21,490 --> 00:05:24,240
where we already set the cta anchor,
92
00:05:24,240 --> 00:05:26,910
and now here for the learn more link,
93
00:05:26,910 --> 00:05:30,810
let's simply make this one move to the first section.
94
00:05:30,810 --> 00:05:32,863
So that's a very common practice.
95
00:05:34,260 --> 00:05:35,570
All right.
96
00:05:35,570 --> 00:05:37,970
So I think we should be done.
97
00:05:37,970 --> 00:05:40,200
So this one, we already tested.
98
00:05:40,200 --> 00:05:42,823
This one leads to the how it works section.
99
00:05:43,870 --> 00:05:46,123
This one here as well.
100
00:05:47,550 --> 00:05:51,340
And let's really test all of them just to make sure.
101
00:05:51,340 --> 00:05:53,843
So testimonials, nice.
102
00:05:54,880 --> 00:05:58,373
Pricing and finally cta.
103
00:05:59,350 --> 00:06:00,690
Beautiful.
104
00:06:00,690 --> 00:06:04,470
So we have everything now set up in the HTML.
105
00:06:04,470 --> 00:06:07,550
And actually if all you cared about
106
00:06:07,550 --> 00:06:11,260
was the Google Chrome browser and also Firefox,
107
00:06:11,260 --> 00:06:14,090
then you wouldn't need any JavaScript at all
108
00:06:14,090 --> 00:06:16,963
to now animate these scrowlings.
109
00:06:17,950 --> 00:06:20,580
So let me show you how we can actually animate
110
00:06:20,580 --> 00:06:23,923
scrolling behavior, just using CSS.
111
00:06:25,410 --> 00:06:29,460
So for that, I'm going to open up our a general
112
00:06:31,410 --> 00:06:33,950
and then in body.
113
00:06:33,950 --> 00:06:35,920
So in the body selector,
114
00:06:35,920 --> 00:06:40,920
we can set scroll behavior to smooth.
115
00:06:43,500 --> 00:06:45,140
All right.
116
00:06:45,140 --> 00:06:50,140
So just to make sure let's remove all of this here.
117
00:06:50,210 --> 00:06:51,760
And now when I click here,
118
00:06:51,760 --> 00:06:54,853
let's see how it moves smoothly to the next section.
119
00:06:56,020 --> 00:06:57,923
Wow, that didn't really work.
120
00:06:58,860 --> 00:07:02,340
So let's go back here and yeah,
121
00:07:02,340 --> 00:07:05,120
actually that scroll behavior property
122
00:07:05,120 --> 00:07:09,283
should not be on a body, but on the HTML.
123
00:07:10,750 --> 00:07:12,150
All right.
124
00:07:12,150 --> 00:07:14,040
So that should fix it.
125
00:07:14,040 --> 00:07:18,660
Let's delete this here and now let's see.
126
00:07:18,660 --> 00:07:23,660
And indeed that was a beautiful, smooth scrolling animation.
127
00:07:25,370 --> 00:07:27,210
All right, here the same
128
00:07:27,210 --> 00:07:30,193
and it will of course work for all of them.
129
00:07:31,420 --> 00:07:33,830
So that's really nice except for
130
00:07:33,830 --> 00:07:37,940
that it doesn't work on the current version of Safari.
131
00:07:37,940 --> 00:07:41,573
So if I copy this and open up Safari,
132
00:07:43,740 --> 00:07:45,433
let's remove this part here.
133
00:07:46,760 --> 00:07:49,660
Then you see that as I click here,
134
00:07:49,660 --> 00:07:53,170
we still have this kind of harsh jump
135
00:07:53,170 --> 00:07:57,770
instead of a nice and smooth animation right.
136
00:07:57,770 --> 00:08:01,360
Now, the problem with this is that Safari is in fact,
137
00:08:01,360 --> 00:08:06,020
the only browser that is available on the iPhone and iPad.
138
00:08:06,020 --> 00:08:09,240
So even Google Chrome on these devices
139
00:08:09,240 --> 00:08:12,640
actually uses Safari as the rendering engine
140
00:08:12,640 --> 00:08:14,890
and so on all these devices,
141
00:08:14,890 --> 00:08:18,700
so on all iPhones out there, it will not work.
142
00:08:18,700 --> 00:08:21,990
So you will always then have simply this.
143
00:08:21,990 --> 00:08:24,720
And this is really not good,
144
00:08:24,720 --> 00:08:28,280
especially for a big page like this one,
145
00:08:28,280 --> 00:08:32,440
where if we click here and then it doesn't move there
146
00:08:32,440 --> 00:08:35,160
very smoothly, it seems like this is
147
00:08:35,160 --> 00:08:38,220
an entirely new page, right?
148
00:08:38,220 --> 00:08:40,700
So this hard jump doesn't really show
149
00:08:40,700 --> 00:08:42,490
that we are moving there.
150
00:08:42,490 --> 00:08:46,820
While when we click here, if we click on meals here,
151
00:08:46,820 --> 00:08:50,450
then we can nicely see that we're still on the same page
152
00:08:50,450 --> 00:08:52,690
and that it simply moved there.
153
00:08:52,690 --> 00:08:54,670
So the animation here is not really
154
00:08:54,670 --> 00:08:56,330
just to make it beautiful,
155
00:08:56,330 --> 00:09:00,420
but also to show the user what is going on, right?
156
00:09:00,420 --> 00:09:04,540
And so we should fix this unless you are like watching this
157
00:09:04,540 --> 00:09:09,540
maybe in like 2024 or 25, then you might be okay
158
00:09:09,970 --> 00:09:12,450
and all the latest versions of Safari
159
00:09:12,450 --> 00:09:14,020
might already have this,
160
00:09:14,020 --> 00:09:17,210
but at this point we should now write some JavaScript
161
00:09:17,210 --> 00:09:20,463
to implement this functionality for all browsers.
162
00:09:22,010 --> 00:09:26,223
Okay, so let's move back here and turn this off.
163
00:09:29,280 --> 00:09:34,280
Does not work on Safari and also not on Microsoft edge.
164
00:09:35,290 --> 00:09:36,870
So maybe right now it does.
165
00:09:36,870 --> 00:09:40,290
I'm not sure because they are using the same engine as
166
00:09:40,290 --> 00:09:45,000
Google Chrome, but sometime ago it also didn't work there.
167
00:09:45,000 --> 00:09:48,040
And yeah, again, the best thing to do
168
00:09:48,040 --> 00:09:51,923
is to just write some JavaScript here to fix that.
169
00:09:54,150 --> 00:09:57,890
And that will not be the only problem we have with Safari.
170
00:09:57,890 --> 00:10:00,263
So the next lecture or the one after that.
171
00:10:01,360 --> 00:10:02,720
Here, you see that all this code
172
00:10:02,720 --> 00:10:05,383
is also for fixing something in Safari,
173
00:10:07,380 --> 00:10:09,830
but let's not get ahead of ourselves
174
00:10:09,830 --> 00:10:14,830
and just work here on the smooth scrolling animation.
175
00:10:16,200 --> 00:10:17,890
Now, okay, now this one will be
176
00:10:17,890 --> 00:10:21,400
a little bit more complex than the one that we did before,
177
00:10:21,400 --> 00:10:24,440
but I will just explain everything step by step.
178
00:10:24,440 --> 00:10:27,300
And then the code at least should make sense.
179
00:10:27,300 --> 00:10:29,830
Even though, as I said before,
180
00:10:29,830 --> 00:10:33,010
I will, of course not expect you to be able to write
181
00:10:33,010 --> 00:10:36,060
this sort of code after just watching
182
00:10:36,060 --> 00:10:37,740
these few lectures here.
183
00:10:37,740 --> 00:10:40,030
For that, you would have to take
184
00:10:40,030 --> 00:10:41,973
probably an entire JavaScript course.
185
00:10:43,630 --> 00:10:46,010
But anyway, let's now select all the links
186
00:10:46,010 --> 00:10:47,823
on the page basically.
187
00:10:49,550 --> 00:10:51,203
So let's say all links.
188
00:10:55,450 --> 00:10:57,600
So document query selector,
189
00:10:57,600 --> 00:11:00,840
and now it is actually query selector all.
190
00:11:00,840 --> 00:11:03,020
So when we want more than just element,
191
00:11:03,020 --> 00:11:05,820
we need to do this and now we can simply
192
00:11:05,820 --> 00:11:08,630
use the a selector, right?
193
00:11:08,630 --> 00:11:12,150
And so that will then select only the links.
194
00:11:12,150 --> 00:11:13,630
And to make it even better,
195
00:11:13,630 --> 00:11:16,313
we can also use the link pseudo class here.
196
00:11:17,190 --> 00:11:18,580
So just like this.
197
00:11:18,580 --> 00:11:21,270
And so then just like in CSS,
198
00:11:21,270 --> 00:11:24,290
this will only select anchor elements,
199
00:11:24,290 --> 00:11:27,450
which actually have the href property.
200
00:11:27,450 --> 00:11:31,113
So again, just like in CSS, right?
201
00:11:32,080 --> 00:11:34,350
Now, just to see,
202
00:11:34,350 --> 00:11:37,123
let's take a look at this inner console.
203
00:11:41,090 --> 00:11:42,270
All right.
204
00:11:42,270 --> 00:11:45,353
So let's inspect this back here.
205
00:11:46,600 --> 00:11:48,590
And so you see now we get this thing here,
206
00:11:48,590 --> 00:11:50,223
which is called a note list.
207
00:11:51,680 --> 00:11:55,480
And then, you see that here we have all of these
208
00:11:56,810 --> 00:11:59,103
anchor elements, right?
209
00:12:00,310 --> 00:12:02,800
Now, next we need to add an event listener
210
00:12:02,800 --> 00:12:06,680
to each of these links, just like we did here before.
211
00:12:06,680 --> 00:12:09,360
So in the exact same way, because now again,
212
00:12:09,360 --> 00:12:12,960
we want to listen for a click event.
213
00:12:12,960 --> 00:12:16,130
So we want something to happen whenever the user clicks
214
00:12:16,130 --> 00:12:17,623
on one of these anchors.
215
00:12:19,270 --> 00:12:23,400
All right, so all links,
216
00:12:23,400 --> 00:12:28,400
but now we can not just write add event listener like this
217
00:12:28,580 --> 00:12:32,970
because as we just saw, the all links are multiple elements.
218
00:12:32,970 --> 00:12:35,730
And so we need to add the add event listener
219
00:12:35,730 --> 00:12:37,383
to each of them individually.
220
00:12:38,490 --> 00:12:40,823
So we can write for each.
221
00:12:43,660 --> 00:12:47,513
Then here, we need to just like before write a function.
222
00:12:49,550 --> 00:12:52,460
And then here we need to specify basically
223
00:12:52,460 --> 00:12:56,710
that each of these elements in the all links is the link.
224
00:12:56,710 --> 00:13:00,010
And this name here could of course be anything we wanted
225
00:13:00,010 --> 00:13:03,920
could be just L but I like to call it here link
226
00:13:03,920 --> 00:13:04,763
in this case.
227
00:13:06,060 --> 00:13:07,860
And so now here is where we have
228
00:13:07,860 --> 00:13:09,780
basically the individual link.
229
00:13:09,780 --> 00:13:14,780
And then we can add event listener here like before.
230
00:13:16,520 --> 00:13:19,200
There would actually be a cleaner way
231
00:13:19,200 --> 00:13:22,810
of doing this called event delegation,
232
00:13:22,810 --> 00:13:25,453
but let's not go into that right here.
233
00:13:27,250 --> 00:13:31,560
So just like before, here we specify a function
234
00:13:31,560 --> 00:13:33,850
and here we did actually give this name.
235
00:13:33,850 --> 00:13:37,020
Again, so this so-called parameter in this function
236
00:13:37,950 --> 00:13:40,490
and this e here stands for event
237
00:13:40,490 --> 00:13:43,480
because we actually do have access to the events
238
00:13:43,480 --> 00:13:44,313
that happens.
239
00:13:45,420 --> 00:13:47,770
So let me show that to you also in the console.
240
00:13:51,230 --> 00:13:52,110
Okay.
241
00:13:52,110 --> 00:13:54,360
And so now the only thing that will happen is
242
00:13:54,360 --> 00:13:56,630
that whenever we click on one of the links,
243
00:13:56,630 --> 00:14:00,793
we will get the event object locked to the console.
244
00:14:02,290 --> 00:14:03,793
So let's try this one here.
245
00:14:04,950 --> 00:14:08,490
And indeed we get a mouse event.
246
00:14:08,490 --> 00:14:13,180
So here we have then all this kind of data here,
247
00:14:13,180 --> 00:14:14,690
which we don't really need.
248
00:14:14,690 --> 00:14:18,250
And I just wanted to show you that we do get access
249
00:14:18,250 --> 00:14:21,313
to that event and it has a bunch of data on it.
250
00:14:22,500 --> 00:14:26,720
Now this is important here because as you see
251
00:14:26,720 --> 00:14:29,950
that the page actually moved here, right?
252
00:14:29,950 --> 00:14:32,740
Because of course that is the default behavior
253
00:14:32,740 --> 00:14:33,743
of the anchor.
254
00:14:35,400 --> 00:14:36,360
Okay.
255
00:14:36,360 --> 00:14:40,370
But now we actually need to turn that default behavior off
256
00:14:40,370 --> 00:14:42,263
so that we can implement our own.
257
00:14:43,660 --> 00:14:45,253
So prevent default.
258
00:14:46,450 --> 00:14:48,323
And so now if we try that again.
259
00:14:50,060 --> 00:14:51,933
So coming up here,
260
00:14:53,980 --> 00:14:56,500
so if I now click then nothing should happen.
261
00:14:56,500 --> 00:15:00,073
And indeed it did not, all right?
262
00:15:01,860 --> 00:15:04,420
And by the way, if you're not really interested
263
00:15:04,420 --> 00:15:06,890
in the code that I'm writing here,
264
00:15:06,890 --> 00:15:10,090
you can just skip this video and simply take the code here
265
00:15:10,090 --> 00:15:14,060
from the final file of the section now, right?
266
00:15:14,060 --> 00:15:15,570
You don't have to go through this
267
00:15:15,570 --> 00:15:19,160
if you're not interested in JavaScript, okay?
268
00:15:19,160 --> 00:15:22,860
But if you are interested, then let's keep going here.
269
00:15:22,860 --> 00:15:24,800
And the first thing I'm going to do
270
00:15:24,800 --> 00:15:28,370
is to now read basically the href attribute
271
00:15:28,370 --> 00:15:30,400
out of the link that was clicked
272
00:15:32,730 --> 00:15:35,890
because we will then use that href to actually scroll
273
00:15:35,890 --> 00:15:37,743
to the corresponding section.
274
00:15:38,660 --> 00:15:43,660
So that is link.getAttribute, with the name of href.
275
00:15:46,900 --> 00:15:48,973
And again, let's log that to the console.
276
00:15:51,080 --> 00:15:54,600
So href, all right?
277
00:15:54,600 --> 00:15:57,660
And here again, I could have given it any name,
278
00:15:57,660 --> 00:15:58,980
but here not.
279
00:15:58,980 --> 00:16:02,230
So here, the name of the attribute that we want to get
280
00:16:02,230 --> 00:16:04,933
from each link is really called href.
281
00:16:05,870 --> 00:16:09,400
So really this here, for example, right?
282
00:16:09,400 --> 00:16:10,940
So the name is href.
283
00:16:10,940 --> 00:16:13,693
And so here we are reading that attribute.
284
00:16:15,070 --> 00:16:17,290
So let's see, when I click here,
285
00:16:17,290 --> 00:16:22,280
then we get cta and here we should get how, right,
286
00:16:22,280 --> 00:16:26,190
because well that's where we set the anchor to,
287
00:16:26,190 --> 00:16:28,683
so we can see that down there also.
288
00:16:31,360 --> 00:16:32,850
Now okay.
289
00:16:32,850 --> 00:16:35,470
And now we actually have everything to implement
290
00:16:35,470 --> 00:16:37,890
our scrolling functionality,
291
00:16:37,890 --> 00:16:41,603
and let's start with the one that scrolls back to the top.
292
00:16:43,160 --> 00:16:45,820
So scroll back to top.
293
00:16:45,820 --> 00:16:48,790
And so those are these ones here.
294
00:16:48,790 --> 00:16:50,550
So this link, for example,
295
00:16:50,550 --> 00:16:54,660
which has just the hash and also like
296
00:16:54,660 --> 00:16:56,103
the one here in the footer.
297
00:16:58,150 --> 00:17:01,070
So this one is also just hash, right?
298
00:17:01,070 --> 00:17:04,790
And so this one and the one at the top,
299
00:17:04,790 --> 00:17:06,943
we want them to scroll back to the top.
300
00:17:08,380 --> 00:17:13,380
So we can say, if the href is equal to just this.
301
00:17:17,720 --> 00:17:19,960
So what we just saw in the browser,
302
00:17:19,960 --> 00:17:24,453
then to window should scroll to.
303
00:17:25,550 --> 00:17:29,403
So you see that all of this reads kind of like English.
304
00:17:30,620 --> 00:17:34,530
Now here we specify this object of options.
305
00:17:34,530 --> 00:17:37,920
And we say the top should be zero pixels
306
00:17:37,920 --> 00:17:42,487
and the behavior should be smooth.
307
00:17:45,720 --> 00:17:49,350
All right, and that's it actually.
308
00:17:49,350 --> 00:17:52,130
So at least for this type of link.
309
00:17:52,130 --> 00:17:54,170
So if I click this now,
310
00:17:54,170 --> 00:17:58,110
then it moves back smoothly to the top.
311
00:17:58,110 --> 00:17:59,690
And the same here.
312
00:17:59,690 --> 00:18:03,040
And it is the top because we set it here to zero.
313
00:18:03,040 --> 00:18:05,930
So we could have set it like to 20,
314
00:18:05,930 --> 00:18:10,930
and then it would move like to 20 pixels of the page.
315
00:18:11,300 --> 00:18:12,490
You saw that.
316
00:18:12,490 --> 00:18:15,040
So not really to the top, but of course
317
00:18:15,040 --> 00:18:17,063
we want it to be zero here.
318
00:18:18,100 --> 00:18:21,560
Now the thing is that not even this here does work
319
00:18:21,560 --> 00:18:25,993
by default in Safari, but there is a fix for that.
320
00:18:27,470 --> 00:18:32,080
So we can just include this line of code here in our HTML.
321
00:18:32,080 --> 00:18:34,410
So this is what we call a polyfill,
322
00:18:34,410 --> 00:18:36,750
which is basically a JavaScript library,
323
00:18:36,750 --> 00:18:40,920
which implements this functionality for Safari.
324
00:18:40,920 --> 00:18:41,883
So let's copy this.
325
00:18:42,760 --> 00:18:47,033
So go ahead and select this text here and then copy it.
326
00:18:48,080 --> 00:18:51,160
And then we need to also add that here as a script,
327
00:18:51,160 --> 00:18:53,993
just like we did here with these ion icons.
328
00:18:55,110 --> 00:18:57,800
So this was an external script
329
00:18:57,800 --> 00:19:00,300
that was loaded from somewhere else.
330
00:19:00,300 --> 00:19:02,420
And this was basically an internal script,
331
00:19:02,420 --> 00:19:04,950
that is loaded from our own page.
332
00:19:04,950 --> 00:19:06,950
And now we will add to this other script
333
00:19:08,276 --> 00:19:10,083
that I just mentioned.
334
00:19:11,660 --> 00:19:16,660
So alt or differ then source and then what we copied before.
335
00:19:19,450 --> 00:19:21,203
All right, give it a save.
336
00:19:22,170 --> 00:19:27,170
And so, yeah, let's copy this here now
337
00:19:28,230 --> 00:19:29,903
and try it out in Safari.
338
00:19:31,690 --> 00:19:33,240
Well, actually we don't,
339
00:19:33,240 --> 00:19:36,140
we can just come here back to the top
340
00:19:36,140 --> 00:19:40,963
and then let's move down and click on this one and whoa,
341
00:19:42,600 --> 00:19:43,750
what's happening there?
342
00:19:46,090 --> 00:19:49,040
Wow, that was just something strange from before,
343
00:19:49,040 --> 00:19:52,470
but what matters here is that now it did scroll smoothly
344
00:19:52,470 --> 00:19:54,120
to the top.
345
00:19:54,120 --> 00:19:55,090
All right.
346
00:19:55,090 --> 00:19:58,970
Now of course these others do not work yet because, well,
347
00:19:58,970 --> 00:20:00,420
we didn't implement them yet.
348
00:20:01,290 --> 00:20:06,290
So we only, yeah, right here, actually.
349
00:20:06,330 --> 00:20:09,860
So we only implemented here the smoothing scrolling
350
00:20:09,860 --> 00:20:13,510
for when the href is exactly this one here.
351
00:20:13,510 --> 00:20:14,540
Right.
352
00:20:14,540 --> 00:20:17,610
But then we also have some other situations.
353
00:20:17,610 --> 00:20:21,573
So basically where the href is not just that.
354
00:20:23,660 --> 00:20:27,173
So href is different then just this.
355
00:20:29,960 --> 00:20:34,960
And at the same time, href starts with that.
356
00:20:37,610 --> 00:20:38,780
Now, okay.
357
00:20:38,780 --> 00:20:41,080
Now here we could also have said
358
00:20:41,080 --> 00:20:43,510
or tested for the situation in which
359
00:20:43,510 --> 00:20:47,110
href starts with this one and is longer
360
00:20:47,110 --> 00:20:49,210
than just one character,
361
00:20:49,210 --> 00:20:52,033
but well that's a really the same here.
362
00:20:53,280 --> 00:20:54,270
Okay.
363
00:20:54,270 --> 00:20:57,063
And now this here works a little bit different.
364
00:20:58,100 --> 00:21:01,760
So for now let's again, just log it to the console
365
00:21:01,760 --> 00:21:04,050
so I can then show you the technique
366
00:21:04,050 --> 00:21:05,350
that we're gonna use here.
367
00:21:06,920 --> 00:21:10,123
So this case, log href to the console.
368
00:21:11,580 --> 00:21:12,930
Okay.
369
00:21:12,930 --> 00:21:14,670
Let's test that here.
370
00:21:14,670 --> 00:21:17,820
And so when we click here, it now should
371
00:21:17,820 --> 00:21:19,700
log that to the console.
372
00:21:19,700 --> 00:21:21,350
And actually that happened twice.
373
00:21:23,690 --> 00:21:27,073
Pick up because we still have this part from before,
374
00:21:28,840 --> 00:21:30,520
but let's go back.
375
00:21:30,520 --> 00:21:33,550
So if we click here, it appears once.
376
00:21:33,550 --> 00:21:36,660
And so that is because it starts with the hash,
377
00:21:36,660 --> 00:21:38,240
but it is not just that.
378
00:21:38,240 --> 00:21:40,010
And so if we click here,
379
00:21:40,010 --> 00:21:43,710
then nothing appears in the console, all right.
380
00:21:43,710 --> 00:21:46,000
So basically, because it does not pass
381
00:21:46,000 --> 00:21:50,630
this testing condition here, all right.
382
00:21:50,630 --> 00:21:54,840
But anyway, what matters is that this string here,
383
00:21:54,840 --> 00:21:59,840
so this text looks somehow like a selector for an id.
384
00:22:00,140 --> 00:22:01,250
Right.
385
00:22:01,250 --> 00:22:06,247
So remember how the hash is the id selector in CSS, right?
386
00:22:07,360 --> 00:22:10,850
And we can very easily check that by copying this.
387
00:22:13,812 --> 00:22:17,557
And then let's say, just here, this is just for testing.
388
00:22:21,570 --> 00:22:26,350
Let's say background blue, right?
389
00:22:26,350 --> 00:22:30,900
And let's see, and indeed there it is.
390
00:22:30,900 --> 00:22:35,040
So this is basically an id selector because yeah,
391
00:22:36,690 --> 00:22:39,050
the hash selects for elements,
392
00:22:39,050 --> 00:22:43,820
which have the id of this here, so of cta in this case.
393
00:22:43,820 --> 00:22:47,020
And so we can use that also to our advantage
394
00:22:47,020 --> 00:22:48,153
in the JavaScript.
395
00:22:49,740 --> 00:22:54,593
So we can now select the element basically based on that.
396
00:22:56,780 --> 00:23:01,140
So we can say document, but query selector all.
397
00:23:01,140 --> 00:23:04,740
And then here remember that we have to write the selector.
398
00:23:04,740 --> 00:23:09,740
And so the selector can simply be the href, right?
399
00:23:09,820 --> 00:23:12,463
For example, just like hash cta.
400
00:23:15,200 --> 00:23:18,460
So that's actually, again, log that to the console
401
00:23:18,460 --> 00:23:21,210
and here, if we have more than one line of code,
402
00:23:21,210 --> 00:23:24,633
we need to start a new block with these curly braces.
403
00:23:26,010 --> 00:23:28,920
So let's call this section element
404
00:23:28,920 --> 00:23:30,303
that we want to scroll to,
405
00:23:31,940 --> 00:23:34,203
and then let's log that's to the console.
406
00:23:38,120 --> 00:23:39,033
All right.
407
00:23:40,150 --> 00:23:41,500
So let's move back up here.
408
00:23:43,750 --> 00:23:47,960
So you see that now we got the element here
409
00:23:47,960 --> 00:23:49,830
that we want to scroll to.
410
00:23:49,830 --> 00:23:52,593
So basically the element that has the id
411
00:23:52,593 --> 00:23:56,423
that is equal to the href of this element right here.
412
00:23:58,660 --> 00:24:02,030
So you see, it is exactly this element here.
413
00:24:02,030 --> 00:24:04,100
And here, if we click on the meals,
414
00:24:04,100 --> 00:24:07,173
we of course get this other one.
415
00:24:09,190 --> 00:24:12,170
So this one, right?
416
00:24:12,170 --> 00:24:16,060
And so now we just need one final piece of the puzzle here,
417
00:24:16,060 --> 00:24:20,860
which is to say section element
418
00:24:22,180 --> 00:24:25,727
dot scroll into view, with the behavior,
419
00:24:29,150 --> 00:24:33,213
and you can guess it, of smooth.
420
00:24:34,870 --> 00:24:36,203
And that's actually it.
421
00:24:37,080 --> 00:24:39,960
So here we could not use the scroll to,
422
00:24:39,960 --> 00:24:43,410
because we wouldn't know which pixel value from the top
423
00:24:43,410 --> 00:24:46,140
we would want to scroll to, right?
424
00:24:46,140 --> 00:24:49,413
And so instead, we can use this scroll into view function.
425
00:24:50,560 --> 00:24:52,843
So let's test that.
426
00:24:54,990 --> 00:24:58,343
And yeah, that works beautifully.
427
00:24:59,780 --> 00:25:02,400
And on all of them, of course it should work.
428
00:25:02,400 --> 00:25:06,000
And now the final test on Safari
429
00:25:06,000 --> 00:25:08,303
and yes, beautiful.
430
00:25:09,460 --> 00:25:13,010
That is really nice, really amazing.
431
00:25:13,010 --> 00:25:16,923
So we just implemented smooth scrolling on all browsers.
432
00:25:17,870 --> 00:25:19,453
Now, just one final thing.
433
00:25:21,450 --> 00:25:24,940
So let me switch back here to the mobile view,
434
00:25:24,940 --> 00:25:29,823
which is, let's make this a bit bigger actually.
435
00:25:31,330 --> 00:25:35,800
So when we switch, so when we turn on our navigation,
436
00:25:35,800 --> 00:25:37,250
then let's say we click here.
437
00:25:38,460 --> 00:25:43,340
So we smoothly moved here and so that's exactly as expected.
438
00:25:43,340 --> 00:25:47,100
However, if we move back up then our navigation
439
00:25:47,100 --> 00:25:51,480
is still here, of course, and that makes sense, right?
440
00:25:51,480 --> 00:25:53,260
I mean, why wouldn't it?
441
00:25:53,260 --> 00:25:56,063
There is nothing telling it that it should disappear.
442
00:25:57,060 --> 00:26:01,680
However, this is not really practical, right?
443
00:26:01,680 --> 00:26:04,980
So whenever we click on one of these links here,
444
00:26:04,980 --> 00:26:09,980
basically we will want the navigation to close, right?
445
00:26:10,070 --> 00:26:11,833
So we want this here to disappear.
446
00:26:12,890 --> 00:26:15,733
Well, that is not all too hard to do.
447
00:26:16,870 --> 00:26:19,733
So what we're gonna do is this,
448
00:26:21,100 --> 00:26:23,693
So moving back here to our HTML,
449
00:26:25,940 --> 00:26:28,480
these links that are in the navigation,
450
00:26:28,480 --> 00:26:32,610
they all have this class name here, right?
451
00:26:32,610 --> 00:26:36,490
And so what we can do is to check if the current link
452
00:26:36,490 --> 00:26:39,620
has this class name, and if it does,
453
00:26:39,620 --> 00:26:41,770
then we just do this here.
454
00:26:41,770 --> 00:26:44,563
So we then just remove the nav open class.
455
00:26:46,680 --> 00:26:47,940
Okay.
456
00:26:47,940 --> 00:26:50,400
So let's keep adding some comments here
457
00:26:50,400 --> 00:26:54,780
to structure our code to scroll to other links
458
00:26:58,470 --> 00:27:03,470
and finally close mobile navigation.
459
00:27:04,420 --> 00:27:09,310
So first off we need to check if the link has that class
460
00:27:09,310 --> 00:27:11,520
of main nav link.
461
00:27:11,520 --> 00:27:14,110
And the way we do that is a little bit similar
462
00:27:14,110 --> 00:27:15,550
to what we did here.
463
00:27:15,550 --> 00:27:17,263
So with this class list.
464
00:27:18,500 --> 00:27:20,603
So we can say link.classlist,
465
00:27:22,450 --> 00:27:26,453
but now instead of a toggle, we can say contains.
466
00:27:27,690 --> 00:27:30,800
So, classlist.content.
467
00:27:30,800 --> 00:27:35,013
And so this basically asks the question, is this class,
468
00:27:35,860 --> 00:27:40,860
so is main nav link inside of the class list
469
00:27:41,740 --> 00:27:43,643
of the link that we just clicked.
470
00:27:44,710 --> 00:27:46,723
Okay, and so if it is,
471
00:27:46,723 --> 00:27:50,023
then we say basically what we have here.
472
00:27:52,920 --> 00:27:57,920
So let's just grab that and that's it.
473
00:27:59,500 --> 00:28:03,040
So again, we basically reach into the list of classes
474
00:28:03,040 --> 00:28:07,860
of the link and so if it contains the main nav link,
475
00:28:07,860 --> 00:28:10,880
and so that's how we identify the five links
476
00:28:10,880 --> 00:28:13,110
that are here in the main nav,
477
00:28:13,110 --> 00:28:16,490
then we want to toggle the nav open.
478
00:28:16,490 --> 00:28:21,033
So basically removing that nav open if it is on the header.
479
00:28:24,880 --> 00:28:26,750
So let's test that again
480
00:28:29,040 --> 00:28:33,610
and we could already see that it was fading out, right?
481
00:28:33,610 --> 00:28:34,970
And so it's gone.
482
00:28:34,970 --> 00:28:36,760
And so with this, we actually
483
00:28:36,760 --> 00:28:39,133
have everything working now beautifully.
484
00:28:39,970 --> 00:28:42,493
And just to make sure let's also test it here,
485
00:28:43,510 --> 00:28:48,240
just making it smaller, all right.
486
00:28:48,240 --> 00:28:49,890
Pricing.
487
00:28:49,890 --> 00:28:52,033
And it's gone now, here as well.
488
00:28:53,680 --> 00:28:56,110
All right, beautiful.
489
00:28:56,110 --> 00:29:00,020
So yet another small effect here, I completed.
490
00:29:00,020 --> 00:29:01,650
So great job.
491
00:29:01,650 --> 00:29:03,940
And so let's move on to the next on
492
00:29:03,940 --> 00:29:07,550
where we will create a so-called sticky navigation.
493
00:29:07,550 --> 00:29:09,600
So in other words, where we will make
494
00:29:09,600 --> 00:29:12,630
this navigation bar here stick on the top
495
00:29:12,630 --> 00:29:14,800
throughout the entire page.
496
00:29:14,800 --> 00:29:17,120
So making it appear up here.
497
00:29:17,120 --> 00:29:19,790
So that's going to be really exciting as well.
498
00:29:19,790 --> 00:29:21,913
So hopefully I see you there soon.
36579
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.