Original subtitles

1 1

Let's now start working on the Bankist website, 2

2

and we're gonna start by implementing smooth scrolling. 3

3

And the functionality that we're going to implement now 4

4

is when we click on this button, 5

5

then it will smoothly scroll to this first section. 6

6

Okay, so that's it, simple fact, all that happens 7

7

is one click, and the effect is that it smoothly scrolls 8

8

here to this first section. 9

9

So we're gonna see two ways of doing this. 10

10

First one a bit more old school, 11

11

which will allow me to show you a couple of interesting 12

12

stuff, and then finally, 13

13

I will show you the more modern way, 14

14

which only works in super modern browsers. 15

15

So let's start by selecting the button and the section 16

16

that we want to scroll to. 17

17

So that button is, it's this one. 18

18

Btn-scroll-to, all right? 19

19

And then the section is this one, section one. 20

20

So with this ID of section one, 21

21

so const, btn-scroll-to, 22

22

this document dot query selector. 23

23

All right. 24

24

And now section one, 25

25

is document dot query selector, and now it's the ID. 26

26

So that's the hash and then section dash dash one. 27

27

So that's the easier part. 28

28

And now as always, we need to start 29

29

by adding an event listener to the button, 30

30

dot add event listener on click, 31

31

and then our function. 32

32

And let's actually give it the event. 33

33

So in the first way that we're going to do, 34

34

we need to first get the coordinates of the element 35

35

that we want to scroll to. 36

36

So let me show you how. 37

37

So s1coords, and that's section one dot, 38

38

getBoundingClientRect. 39

39

All right, that sounds like a mouthful. 40

40

It's actually pretty straightforward. 41

41

Let me show it to you actually first. 42

42

So when I click this, 43

43

then we get to this DOM rectangle now, right? 44

44

And it has all of these properties so, the X position, 45

45

which is measured from the left side, the Y position, 46

46

which is measured from the top, and then the width 47

47

of the element to height, and then a lot 48

48

of other properties now, right? 49

49

And this element is probably not the best one to understand 50

50

this, so let's get this rectangle for the button. 51

51

So that's the element we just clicked. 52

52

So e.target, remember. 53

53

So e.target is essentially this element here. 54

54

So the one that was clicked and now 55

55

we'll getBoundingClientRect as well. 56

56

And so let's take a look at that second one. 57

57

So this 30 pixels here is the distance between the border 58

58

here off the browser, all right? 59

59

And then this Y is this distance from the top. 60

60

Then we also have the width, which is this 112, the height. 61

61

And yeah, here we also get to top, which is in this case, 62

62

similar to y, okay. 63

63

But it isn't always because when we scroll then X and Y 64

64

actually change, let me show that to you. 65

65

And if I click this again now, then let's take a look here. 66

66

So you'll see that Y is now only 168 pixels. 67

67

And so that's the distance between this element and the top 68

68

of this view port. 69

69

So this BoundingClientRect is basically relative 70

70

to this visible view port, all right? 71

71

And also, in fact, we can get the current scroll position 72

72

So since we're talking about scrolling, 73

73

let me show that to you as well. 74

74

So current scroll, so that's the X and the Y positions, 75

75

just so we see what we are looking at. 76

76

So these values are at window.pageXoffset and pageYoffset. 77

77

So let me just scroll somewhere here, collect this. 78

78

And so we get that the current scroll is at zero from X, 79

79

so there is no horizontal scroll and vertically, 80

80

we already scrolled 290 pixels here at this point. 81

81

So when we're at the very top, 82

82

then these two values should both be zero. 83

83

And so, yeah, now they are. 84

84

So basically this Y coordinate here is the distance between 85

85

the current position here of the view port, 86

86

and at the top of the page. 87

87

So here at this line, for example, when we were here, 88

88

if we get to scroll now, well, 89

89

now we can't because we can't click on the button, but yeah, 90

90

you get the point so the distance, for example, 91

91

here is now 421. 92

92

So that means that from this very edge off the browser right 93

93

now, all the way to the top of the page, it is 421 pixels. 94

94

Okay, and sometimes that's very important 95

95

to know in certain applications. 96

96

And if you're even more curious, then since 97

97

we're talking about coordinates and stuff, 98

98

we can also read the height and the width of this view port. 99

99

So again, of this, 100

100

a rectangle in which we can see the current portion 101

101

of the page, so height and width of view port, 102

102

and they are at document.documentElement.clientHeight, 103

103

and then the same with clientWidth. 104

104

With clientWidth, all right. 105

105

So you see that this height here is 588 and a width, 1067. 106

106

So if I changed this here, so this is kind of half now, 107

107

so let's see what value we get now. 108

108

And so now it is 276. 109

109

Okay. 110

110

And so that's because I decreased that visible box there. 111

111

And so the height of the viewport is of course different. 112

112

So let's reload here, click again, and so, yeah, 113

113

here we get all kinds of interesting information 114

114

about coordinates scrolling and dimensions of the view port. 115

115

Alright. 116

116

But anyway, the goal of actually getting these coordinates 117

117

is because we need them to scroll to this first section 118

118

here now, right? 119

119

So basically we need these coordinates here to tell 120

120

JavaScript where it should scroll to. 121

121

So let's now do that actually. 122

122

So scrolling, and we use window.scrollTo, okay. 123

123

So that's a global function that's available on the window 124

124

object and here, the first argument is the left position. 125

125

And so that is at s1coords, and let's take a look here. 126

126

So this is the one, now it's gone. 127

127

So we are interested here in this left value right now. 128

128

So it is zero. 129

129

And that's good because we don't want any horizontal scroll 130

130

then for the second one, 131

131

we're gonna be interested in the top, which is again, 132

132

the position from the top of the viewport. 133

133

So the section starts here. 134

134

So it's basically these 270 pixels right there. 135

135

Okay. 136

136

So left, s1coords.top. 137

137

So let's give it some more space and let's try it. 138

138

And indeed now it worked. 139

139

So we are now here at the top of section one. 140

140

Okay. 141

141

And so that's because the top was at 730 pixels. 142

142

And so that's the distance that was scrolled. 143

143

However, what happens when I click again? 144

144

So now it doesn't really work, does it? 145

145

Well that's because this top here that we specified 146

146

is always relative to the view port, 147

147

but not to the document. 148

148

So not to the top of the page basically, right? 149

149

So let me show it to you again. 150

150

So it works when we are here, now right? 151

151

And that's because this Y position here, 152

152

which is the same as this top is, 429, 153

153

which is basically the distance between this point 154

154

and this point, okay. 155

155

But if we're doing it here, 156

156

then the distance between the line and the top 157

157

of the view port here is a lot less. 158

158

So it's only like 200 or something. 159

159

So let's see. 160

160

It is only, actually it's only 112. 161

161

Well, that doesn't make sense. 162

162

Actually, it's this one, so it's only 333. 163

163

All right. 164

164

And so basically it only scrolled to position 333, 165

165

while in fact we want it to scroll all the way to here, 166

166

which was at something like, 167

167

so it was at 492, or actually at 713. 168

168

Okay, so I know it's all a little bit confusing. 169

169

and in order to really understand all of these numbers, 170

170

you have to play around with this a lot by yourself. 171

171

Otherwise, it's gonna be hard to make sense of this, 172

172

but the solution to this problem is to simply add 173

173

the current scroll position to the top value here. 174

174

And with this, 175

175

we will then determine the position of the section here, 176

176

not relative to the viewport. 177

177

So to the top of this browser window here, 178

178

but instead to the top of the page. 179

179

Okay. 180

180

So again, 181

181

the position of the section here is always this top, 182

182

which is from here to the view port, 183

183

plus the current scroll position. 184

184

And so that's the distance from here all the way to the top. 185

185

Okay? 186

186

So let's add that here and again, 187

187

to really make sense of all I'm seeing here, 188

188

please play around with this a lot by yourself. 189

189

Okay? 190

190

So pageYoffset and here it should actually also be window. 191

191

And then we also, just for the sake of completeness, 192

192

edit here as well. 193

193

So window.pageXoffset. 194

194

Okay. 195

195

So let's see if it still works here and it does, 196

196

and now let's try it from somewhere else like here, 197

197

and now it works, now it goes to the correct place. 198

198

And so by doing this here 199

199

we basically determined the absolute position 200

200

of this element relative to the document. 201

201

So to the entire page, 202

202

now that's important to note, so if you need that, 203

203

then this is how you calculate it. 204

204

So again, the current position, plus the current scroll, 205

205

all right, now we can even make this better. 206

206

So dot scrollTo again, 207

207

because there is a way of making this animation 208

208

nice and smooth. 209

209

And this works by passing in an object now, 210

210

instead of just one argument. 211

211

So let's get these two, and then let's comment 212

212

all of this out. 213

213

And so the properties that we need to specify are the left 214

214

So this is the left. 215

215

This is the top, and so this is actually called top. 216

216

And then we also have a property called behavior. 217

217

And so here we can now specify smooth, all right? 218

218

So to implement smooth scrolling like this, 219

219

we need to specify an object with the left top 220

220

and behavior properties. 221

221

So let's try it out and it works, great. 222

222

So that is a lot better, isn't it? 223

223

And again, 224

224

it also is going to work from this position and the browser 225

225

automatically figures out the speed it should go to make 226

226

this look really nice, all right. 227

227

So this is kind of the old school way still of doing it. 228

228

So manually calculating all of these values here, 229

229

and then saying that we want to scroll to disposition 230

230

all right? 231

231

But there is a more modern way 232

232

and it works like this. 233

233

We simply take the element that we want to scroll to, 234

234

and that is section1, and on that we call, 235

235

scroll into view and then we pass in an object and specify 236

236

again, behavior and set it to smooth. 237

237

And that's actually it. 238

238

Then we don't need any of this. 239

239

Okay, let me prove it to you. 240

240

And it works just the same. 241

241

So without any of these weird calculations here 242

242

with these weird positions and all of that, 243

243

it's all unnecessary if we are able to use dysfunction 244

244

here, and again, this only works in modern browsers, 245

245

but if you only need to support these, 246

246

then you are 100% fine using only this method. 247

247

But I think it was still a good idea to show you all 248

248

of these different numbers here. 249

249

So like calculating the current scroll positions 250

250

or the current window positions and sizes, 251

251

and also all the sizes of the elements 252

252

that we can get using this function. 253

253

And by the way, 254

254

these client height and width here are not counting 255

255

with the scroll bars. 256

256

It's dusty dimensions of the view port, 257

257

that are actually available for the content. 258

258

And of course that excludes any scroll bars.