Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,290 --> 00:00:05,280
Let's now start working on the Bankist website,
2
2
00:00:05,280 --> 00:00:08,593
and we're gonna start by implementing smooth scrolling.
3
3
00:00:10,640 --> 00:00:13,660
And the functionality that we're going to implement now
4
4
00:00:13,660 --> 00:00:15,580
is when we click on this button,
5
5
00:00:15,580 --> 00:00:19,163
then it will smoothly scroll to this first section.
6
6
00:00:20,420 --> 00:00:24,410
Okay, so that's it, simple fact, all that happens
7
7
00:00:24,410 --> 00:00:28,261
is one click, and the effect is that it smoothly scrolls
8
8
00:00:28,261 --> 00:00:30,780
here to this first section.
9
9
00:00:30,780 --> 00:00:34,050
So we're gonna see two ways of doing this.
10
10
00:00:34,050 --> 00:00:36,460
First one a bit more old school,
11
11
00:00:36,460 --> 00:00:39,050
which will allow me to show you a couple of interesting
12
12
00:00:39,050 --> 00:00:41,040
stuff, and then finally,
13
13
00:00:41,040 --> 00:00:43,100
I will show you the more modern way,
14
14
00:00:43,100 --> 00:00:46,260
which only works in super modern browsers.
15
15
00:00:46,260 --> 00:00:48,670
So let's start by selecting the button and the section
16
16
00:00:48,670 --> 00:00:50,483
that we want to scroll to.
17
17
00:00:51,780 --> 00:00:56,630
So that button is, it's this one.
18
18
00:00:56,630 --> 00:00:59,067
Btn-scroll-to, all right?
19
19
00:00:59,067 --> 00:01:02,460
And then the section is this one, section one.
20
20
00:01:02,460 --> 00:01:05,183
So with this ID of section one,
21
21
00:01:07,310 --> 00:01:12,200
so const, btn-scroll-to,
22
22
00:01:12,200 --> 00:01:16,903
this document dot query selector.
23
23
00:01:20,070 --> 00:01:21,290
All right.
24
24
00:01:21,290 --> 00:01:22,933
And now section one,
25
25
00:01:25,310 --> 00:01:30,310
is document dot query selector, and now it's the ID.
26
26
00:01:30,880 --> 00:01:35,880
So that's the hash and then section dash dash one.
27
27
00:01:38,090 --> 00:01:39,980
So that's the easier part.
28
28
00:01:39,980 --> 00:01:41,052
And now as always, we need to start
29
29
00:01:41,052 --> 00:01:45,203
by adding an event listener to the button,
30
30
00:01:47,690 --> 00:01:52,193
dot add event listener on click,
31
31
00:01:54,090 --> 00:01:55,760
and then our function.
32
32
00:01:55,760 --> 00:01:58,093
And let's actually give it the event.
33
33
00:01:59,330 --> 00:02:02,070
So in the first way that we're going to do,
34
34
00:02:02,070 --> 00:02:04,793
we need to first get the coordinates of the element
35
35
00:02:04,793 --> 00:02:06,633
that we want to scroll to.
36
36
00:02:07,840 --> 00:02:09,793
So let me show you how.
37
37
00:02:11,250 --> 00:02:15,913
So s1coords, and that's section one dot,
38
38
00:02:16,873 --> 00:02:18,706
getBoundingClientRect.
39
39
00:02:22,412 --> 00:02:25,920
All right, that sounds like a mouthful.
40
40
00:02:25,920 --> 00:02:28,160
It's actually pretty straightforward.
41
41
00:02:28,160 --> 00:02:30,033
Let me show it to you actually first.
42
42
00:02:32,320 --> 00:02:34,160
So when I click this,
43
43
00:02:34,160 --> 00:02:38,570
then we get to this DOM rectangle now, right?
44
44
00:02:38,570 --> 00:02:42,440
And it has all of these properties so, the X position,
45
45
00:02:42,440 --> 00:02:46,460
which is measured from the left side, the Y position,
46
46
00:02:46,460 --> 00:02:49,130
which is measured from the top, and then the width
47
47
00:02:49,130 --> 00:02:52,180
of the element to height, and then a lot
48
48
00:02:52,180 --> 00:02:55,370
of other properties now, right?
49
49
00:02:55,370 --> 00:02:59,242
And this element is probably not the best one to understand
50
50
00:02:59,242 --> 00:03:03,743
this, so let's get this rectangle for the button.
51
51
00:03:04,640 --> 00:03:06,630
So that's the element we just clicked.
52
52
00:03:06,630 --> 00:03:09,850
So e.target, remember.
53
53
00:03:09,850 --> 00:03:13,700
So e.target is essentially this element here.
54
54
00:03:13,700 --> 00:03:16,810
So the one that was clicked and now
55
55
00:03:16,810 --> 00:03:19,863
we'll getBoundingClientRect as well.
56
56
00:03:22,950 --> 00:03:25,610
And so let's take a look at that second one.
57
57
00:03:25,610 --> 00:03:30,582
So this 30 pixels here is the distance between the border
58
58
00:03:30,582 --> 00:03:33,750
here off the browser, all right?
59
59
00:03:33,750 --> 00:03:37,610
And then this Y is this distance from the top.
60
60
00:03:37,610 --> 00:03:41,513
Then we also have the width, which is this 112, the height.
61
61
00:03:46,250 --> 00:03:50,380
And yeah, here we also get to top, which is in this case,
62
62
00:03:50,380 --> 00:03:53,290
similar to y, okay.
63
63
00:03:53,290 --> 00:03:57,270
But it isn't always because when we scroll then X and Y
64
64
00:03:57,270 --> 00:04:00,130
actually change, let me show that to you.
65
65
00:04:00,130 --> 00:04:05,130
And if I click this again now, then let's take a look here.
66
66
00:04:07,090 --> 00:04:11,390
So you'll see that Y is now only 168 pixels.
67
67
00:04:11,390 --> 00:04:14,445
And so that's the distance between this element and the top
68
68
00:04:14,445 --> 00:04:16,760
of this view port.
69
69
00:04:16,760 --> 00:04:21,000
So this BoundingClientRect is basically relative
70
70
00:04:21,000 --> 00:04:24,273
to this visible view port, all right?
71
71
00:04:25,210 --> 00:04:29,310
And also, in fact, we can get the current scroll position
72
72
00:04:29,310 --> 00:04:31,580
So since we're talking about scrolling,
73
73
00:04:31,580 --> 00:04:33,193
let me show that to you as well.
74
74
00:04:34,860 --> 00:04:39,860
So current scroll, so that's the X and the Y positions,
75
75
00:04:42,160 --> 00:04:44,523
just so we see what we are looking at.
76
76
00:04:45,510 --> 00:04:48,613
So these values are at window.pageXoffset and pageYoffset.
77
77
00:04:55,460 --> 00:05:00,460
So let me just scroll somewhere here, collect this.
78
78
00:05:01,000 --> 00:05:05,490
And so we get that the current scroll is at zero from X,
79
79
00:05:05,490 --> 00:05:08,780
so there is no horizontal scroll and vertically,
80
80
00:05:08,780 --> 00:05:13,340
we already scrolled 290 pixels here at this point.
81
81
00:05:13,340 --> 00:05:14,920
So when we're at the very top,
82
82
00:05:14,920 --> 00:05:18,070
then these two values should both be zero.
83
83
00:05:18,070 --> 00:05:20,150
And so, yeah, now they are.
84
84
00:05:20,150 --> 00:05:23,467
So basically this Y coordinate here is the distance between
85
85
00:05:23,467 --> 00:05:27,700
the current position here of the view port,
86
86
00:05:27,700 --> 00:05:29,233
and at the top of the page.
87
87
00:05:30,190 --> 00:05:32,840
So here at this line, for example, when we were here,
88
88
00:05:33,910 --> 00:05:37,040
if we get to scroll now, well,
89
89
00:05:37,040 --> 00:05:41,000
now we can't because we can't click on the button, but yeah,
90
90
00:05:41,000 --> 00:05:43,780
you get the point so the distance, for example,
91
91
00:05:43,780 --> 00:05:47,000
here is now 421.
92
92
00:05:47,000 --> 00:05:50,240
So that means that from this very edge off the browser right
93
93
00:05:50,240 --> 00:05:55,188
now, all the way to the top of the page, it is 421 pixels.
94
94
00:05:55,188 --> 00:05:58,170
Okay, and sometimes that's very important
95
95
00:05:58,170 --> 00:06:00,793
to know in certain applications.
96
96
00:06:01,710 --> 00:06:06,319
And if you're even more curious, then since
97
97
00:06:06,319 --> 00:06:08,470
we're talking about coordinates and stuff,
98
98
00:06:08,470 --> 00:06:12,410
we can also read the height and the width of this view port.
99
99
00:06:12,410 --> 00:06:13,954
So again, of this,
100
100
00:06:13,954 --> 00:06:17,400
a rectangle in which we can see the current portion
101
101
00:06:17,400 --> 00:06:22,400
of the page, so height and width of view port,
102
102
00:06:26,190 --> 00:06:29,543
and they are at document.documentElement.clientHeight,
103
103
00:06:34,250 --> 00:06:36,503
and then the same with clientWidth.
104
104
00:06:41,665 --> 00:06:43,998
With clientWidth, all right.
105
105
00:06:47,630 --> 00:06:51,953
So you see that this height here is 588 and a width, 1067.
106
106
00:06:53,470 --> 00:06:58,470
So if I changed this here, so this is kind of half now,
107
107
00:06:58,930 --> 00:07:01,053
so let's see what value we get now.
108
108
00:07:02,090 --> 00:07:05,520
And so now it is 276.
109
109
00:07:05,520 --> 00:07:06,353
Okay.
110
110
00:07:06,353 --> 00:07:09,570
And so that's because I decreased that visible box there.
111
111
00:07:09,570 --> 00:07:12,983
And so the height of the viewport is of course different.
112
112
00:07:13,920 --> 00:07:18,920
So let's reload here, click again, and so, yeah,
113
113
00:07:18,970 --> 00:07:22,077
here we get all kinds of interesting information
114
114
00:07:22,077 --> 00:07:27,077
about coordinates scrolling and dimensions of the view port.
115
115
00:07:27,551 --> 00:07:28,537
Alright.
116
116
00:07:28,537 --> 00:07:32,820
But anyway, the goal of actually getting these coordinates
117
117
00:07:32,820 --> 00:07:36,730
is because we need them to scroll to this first section
118
118
00:07:36,730 --> 00:07:38,630
here now, right?
119
119
00:07:38,630 --> 00:07:41,610
So basically we need these coordinates here to tell
120
120
00:07:41,610 --> 00:07:44,327
JavaScript where it should scroll to.
121
121
00:07:44,327 --> 00:07:47,213
So let's now do that actually.
122
122
00:07:49,090 --> 00:07:53,763
So scrolling, and we use window.scrollTo, okay.
123
123
00:07:57,220 --> 00:08:00,520
So that's a global function that's available on the window
124
124
00:08:00,520 --> 00:08:04,373
object and here, the first argument is the left position.
125
125
00:08:05,668 --> 00:08:08,947
And so that is at s1coords, and let's take a look here.
126
126
00:08:11,900 --> 00:08:15,633
So this is the one, now it's gone.
127
127
00:08:18,750 --> 00:08:23,750
So we are interested here in this left value right now.
128
128
00:08:23,760 --> 00:08:25,130
So it is zero.
129
129
00:08:25,130 --> 00:08:29,350
And that's good because we don't want any horizontal scroll
130
130
00:08:29,350 --> 00:08:30,730
then for the second one,
131
131
00:08:30,730 --> 00:08:34,350
we're gonna be interested in the top, which is again,
132
132
00:08:34,350 --> 00:08:37,910
the position from the top of the viewport.
133
133
00:08:37,910 --> 00:08:40,030
So the section starts here.
134
134
00:08:40,030 --> 00:08:43,993
So it's basically these 270 pixels right there.
135
135
00:08:45,530 --> 00:08:46,363
Okay.
136
136
00:08:47,590 --> 00:08:49,820
So left, s1coords.top.
137
137
00:08:55,380 --> 00:08:59,113
So let's give it some more space and let's try it.
138
138
00:08:59,990 --> 00:09:02,470
And indeed now it worked.
139
139
00:09:02,470 --> 00:09:06,400
So we are now here at the top of section one.
140
140
00:09:06,400 --> 00:09:07,880
Okay.
141
141
00:09:07,880 --> 00:09:12,880
And so that's because the top was at 730 pixels.
142
142
00:09:15,520 --> 00:09:18,153
And so that's the distance that was scrolled.
143
143
00:09:20,380 --> 00:09:23,763
However, what happens when I click again?
144
144
00:09:25,020 --> 00:09:27,763
So now it doesn't really work, does it?
145
145
00:09:28,750 --> 00:09:32,830
Well that's because this top here that we specified
146
146
00:09:32,830 --> 00:09:35,350
is always relative to the view port,
147
147
00:09:35,350 --> 00:09:37,940
but not to the document.
148
148
00:09:37,940 --> 00:09:41,927
So not to the top of the page basically, right?
149
149
00:09:44,130 --> 00:09:46,410
So let me show it to you again.
150
150
00:09:46,410 --> 00:09:49,940
So it works when we are here, now right?
151
151
00:09:49,940 --> 00:09:52,780
And that's because this Y position here,
152
152
00:09:52,780 --> 00:09:57,780
which is the same as this top is, 429,
153
153
00:09:59,000 --> 00:10:01,950
which is basically the distance between this point
154
154
00:10:01,950 --> 00:10:05,180
and this point, okay.
155
155
00:10:05,180 --> 00:10:07,730
But if we're doing it here,
156
156
00:10:07,730 --> 00:10:10,780
then the distance between the line and the top
157
157
00:10:10,780 --> 00:10:13,740
of the view port here is a lot less.
158
158
00:10:13,740 --> 00:10:15,933
So it's only like 200 or something.
159
159
00:10:17,020 --> 00:10:18,490
So let's see.
160
160
00:10:18,490 --> 00:10:22,691
It is only, actually it's only 112.
161
161
00:10:22,691 --> 00:10:24,191
Well, that doesn't make sense.
162
162
00:10:28,340 --> 00:10:33,210
Actually, it's this one, so it's only 333.
163
163
00:10:33,210 --> 00:10:34,050
All right.
164
164
00:10:34,050 --> 00:10:38,900
And so basically it only scrolled to position 333,
165
165
00:10:38,900 --> 00:10:42,290
while in fact we want it to scroll all the way to here,
166
166
00:10:42,290 --> 00:10:44,093
which was at something like,
167
167
00:10:46,210 --> 00:10:51,210
so it was at 492, or actually at 713.
168
168
00:10:53,260 --> 00:10:56,930
Okay, so I know it's all a little bit confusing.
169
169
00:10:56,930 --> 00:10:59,870
and in order to really understand all of these numbers,
170
170
00:10:59,870 --> 00:11:03,340
you have to play around with this a lot by yourself.
171
171
00:11:03,340 --> 00:11:06,900
Otherwise, it's gonna be hard to make sense of this,
172
172
00:11:06,900 --> 00:11:09,980
but the solution to this problem is to simply add
173
173
00:11:09,980 --> 00:11:14,024
the current scroll position to the top value here.
174
174
00:11:14,024 --> 00:11:15,460
And with this,
175
175
00:11:15,460 --> 00:11:18,890
we will then determine the position of the section here,
176
176
00:11:18,890 --> 00:11:21,730
not relative to the viewport.
177
177
00:11:21,730 --> 00:11:24,670
So to the top of this browser window here,
178
178
00:11:24,670 --> 00:11:27,483
but instead to the top of the page.
179
179
00:11:28,320 --> 00:11:29,610
Okay.
180
180
00:11:29,610 --> 00:11:30,443
So again,
181
181
00:11:30,443 --> 00:11:33,840
the position of the section here is always this top,
182
182
00:11:33,840 --> 00:11:36,290
which is from here to the view port,
183
183
00:11:36,290 --> 00:11:38,510
plus the current scroll position.
184
184
00:11:38,510 --> 00:11:42,253
And so that's the distance from here all the way to the top.
185
185
00:11:43,840 --> 00:11:44,673
Okay?
186
186
00:11:44,673 --> 00:11:47,320
So let's add that here and again,
187
187
00:11:47,320 --> 00:11:50,690
to really make sense of all I'm seeing here,
188
188
00:11:50,690 --> 00:11:53,910
please play around with this a lot by yourself.
189
189
00:11:53,910 --> 00:11:55,100
Okay?
190
190
00:11:55,100 --> 00:11:59,803
So pageYoffset and here it should actually also be window.
191
191
00:12:01,330 --> 00:12:05,380
And then we also, just for the sake of completeness,
192
192
00:12:05,380 --> 00:12:07,200
edit here as well.
193
193
00:12:07,200 --> 00:12:09,153
So window.pageXoffset.
194
194
00:12:13,560 --> 00:12:14,770
Okay.
195
195
00:12:14,770 --> 00:12:18,463
So let's see if it still works here and it does,
196
196
00:12:18,463 --> 00:12:22,630
and now let's try it from somewhere else like here,
197
197
00:12:22,630 --> 00:12:25,713
and now it works, now it goes to the correct place.
198
198
00:12:25,713 --> 00:12:27,800
And so by doing this here
199
199
00:12:27,800 --> 00:12:30,790
we basically determined the absolute position
200
200
00:12:30,790 --> 00:12:35,210
of this element relative to the document.
201
201
00:12:35,210 --> 00:12:37,270
So to the entire page,
202
202
00:12:37,270 --> 00:12:40,600
now that's important to note, so if you need that,
203
203
00:12:40,600 --> 00:12:43,009
then this is how you calculate it.
204
204
00:12:43,009 --> 00:12:47,256
So again, the current position, plus the current scroll,
205
205
00:12:47,256 --> 00:12:51,683
all right, now we can even make this better.
206
206
00:12:55,470 --> 00:12:57,743
So dot scrollTo again,
207
207
00:12:59,053 --> 00:13:00,800
because there is a way of making this animation
208
208
00:13:00,800 --> 00:13:02,550
nice and smooth.
209
209
00:13:02,550 --> 00:13:05,130
And this works by passing in an object now,
210
210
00:13:05,130 --> 00:13:07,900
instead of just one argument.
211
211
00:13:07,900 --> 00:13:11,020
So let's get these two, and then let's comment
212
212
00:13:11,020 --> 00:13:12,183
all of this out.
213
213
00:13:14,850 --> 00:13:19,850
And so the properties that we need to specify are the left
214
214
00:13:20,910 --> 00:13:22,863
So this is the left.
215
215
00:13:24,430 --> 00:13:27,890
This is the top, and so this is actually called top.
216
216
00:13:27,890 --> 00:13:31,593
And then we also have a property called behavior.
217
217
00:13:33,020 --> 00:13:38,020
And so here we can now specify smooth, all right?
218
218
00:13:38,950 --> 00:13:41,760
So to implement smooth scrolling like this,
219
219
00:13:41,760 --> 00:13:44,865
we need to specify an object with the left top
220
220
00:13:44,865 --> 00:13:47,670
and behavior properties.
221
221
00:13:47,670 --> 00:13:52,670
So let's try it out and it works, great.
222
222
00:13:52,770 --> 00:13:55,293
So that is a lot better, isn't it?
223
223
00:13:56,597 --> 00:13:57,430
And again,
224
224
00:13:57,430 --> 00:14:02,430
it also is going to work from this position and the browser
225
225
00:14:02,480 --> 00:14:06,180
automatically figures out the speed it should go to make
226
226
00:14:06,180 --> 00:14:09,470
this look really nice, all right.
227
227
00:14:09,470 --> 00:14:13,850
So this is kind of the old school way still of doing it.
228
228
00:14:13,850 --> 00:14:17,400
So manually calculating all of these values here,
229
229
00:14:17,400 --> 00:14:21,381
and then saying that we want to scroll to disposition
230
230
00:14:21,381 --> 00:14:22,448
all right?
231
231
00:14:22,448 --> 00:14:25,340
But there is a more modern way
232
232
00:14:26,550 --> 00:14:28,210
and it works like this.
233
233
00:14:28,210 --> 00:14:31,680
We simply take the element that we want to scroll to,
234
234
00:14:31,680 --> 00:14:35,930
and that is section1, and on that we call,
235
235
00:14:35,930 --> 00:14:40,930
scroll into view and then we pass in an object and specify
236
236
00:14:41,192 --> 00:14:45,023
again, behavior and set it to smooth.
237
237
00:14:45,980 --> 00:14:47,880
And that's actually it.
238
238
00:14:47,880 --> 00:14:49,913
Then we don't need any of this.
239
239
00:14:52,490 --> 00:14:54,023
Okay, let me prove it to you.
240
240
00:14:55,850 --> 00:14:58,420
And it works just the same.
241
241
00:14:58,420 --> 00:15:02,020
So without any of these weird calculations here
242
242
00:15:02,020 --> 00:15:05,160
with these weird positions and all of that,
243
243
00:15:05,160 --> 00:15:08,825
it's all unnecessary if we are able to use dysfunction
244
244
00:15:08,825 --> 00:15:12,921
here, and again, this only works in modern browsers,
245
245
00:15:12,921 --> 00:15:15,920
but if you only need to support these,
246
246
00:15:15,920 --> 00:15:20,250
then you are 100% fine using only this method.
247
247
00:15:20,250 --> 00:15:23,520
But I think it was still a good idea to show you all
248
248
00:15:23,520 --> 00:15:26,500
of these different numbers here.
249
249
00:15:26,500 --> 00:15:29,826
So like calculating the current scroll positions
250
250
00:15:29,826 --> 00:15:34,130
or the current window positions and sizes,
251
251
00:15:34,130 --> 00:15:36,960
and also all the sizes of the elements
252
252
00:15:36,960 --> 00:15:39,740
that we can get using this function.
253
253
00:15:39,740 --> 00:15:40,573
And by the way,
254
254
00:15:40,573 --> 00:15:44,040
these client height and width here are not counting
255
255
00:15:44,040 --> 00:15:45,430
with the scroll bars.
256
256
00:15:45,430 --> 00:15:48,030
It's dusty dimensions of the view port,
257
257
00:15:48,030 --> 00:15:50,980
that are actually available for the content.
258
258
00:15:50,980 --> 00:15:54,143
And of course that excludes any scroll bars.
22601
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.