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