5.3 Setting Up Your Scroll Positions

Hello and welcome back to scroll events made easy. We created some basic animation for our scrolling, but it doesn't really work all that well just yet, because this value is not always true. As we saw before, when we animate through our page, the first couple of slides work just fine. But once we try to animate to the last slide, everything gets where it needs to be except for the space shuttle. We also have some weird jumpy animations happening. If we go to the second slide here and then click again, watch what happens. There's a little bit of a repeat of the previous animation before the next animation takes place. So we have a couple issues that need to be addressed. So, first of all, let's get rid of this little twitch that's happening in between animations. And the reason that's happening is because our links are pointing to pound, which is basically just an empty link, but it's gonna try to navigate us back to the top of the page. So, what I wanna do, when this button is initially clicked, I want to prevent the default behavior of that button. And we can do that very easily in JavaScript. Let's scroll back down. Inside our click function, you'll notice we have this e variable here, and that represents the event itself. And we can use that event variable to prevent the default behavior of this button, and the way we do that is we simply go inside this click function, and we point to that e variable, and we type .prevent and then Default with a capital D. Open and close parentheses, semicolon to end your statement. So that will prevent that default behavior and it will in turn make for a much smoother animation. Let me go ahead and point out that we are in the site20 folder now. So all the changes we make in this lesson will be saved there. So let's scroll back up and refresh the page. We'll hit the Next button once. And we never had a problem with that animation, but with this animation we had a weird hiccup before it continued. Let's click on Next and we see that that issue is taken care of, it's gone. The next problem that we have, and we're gonna have a few more problems before we're done, but the next issue we need to address is the fact that that 1,000 pixels is not always perfect. Because once we get to this last slide, we've suddenly stopped in the middle of an animation and we have to click Next again to get that animation to finish. Now if you want that spaceship to end up right there and then click Next again to finish it off, that's fine. But, I don't wanna do that. I want to finish that animation out. So we can't just rely on this 1000 here. Instead, what I want to do is I want to store a list of all of the positions in our slideshow basically. And, those positions will be represented by the pixel value of our scroll bar. So at the very top, when the page first loads and we're scrolled all the way to the top, we have a value of 0. Slide two is gonna be at 1000, slide three is at 2000, and slide four is a little bit further down. It's all the way down to 4,000, so I want to store a list of those positions in an array. Now if you're not a programmer, if you've never used JavaScript or anything before, an array is just like a variable, in that it stores a value, except an array stores a list of values. You can store multiple values in an array. So we can create a variable here called positions. And in order to make it an array, we're gonna store it inside square brackets. And then inside those square brackets, we would simply type out the list of values that we want to store. So our first value for slide one is 0. Our second value at slide two is 1,000. Slide three is 2,000 and at slide four is 4000. So now we have a list of our positions, and the way we access those positions, let's say we wanted to access the very first one here. Also, to prevent confusion, I'm gonna temporarily change this to 500. So to point to the first element in this array, we're gonna point to the array itself which is called positions. And then inside square brackets, we're gonna enter the index number of the item we wanna look at. But we need to keep in mind that those indexes start at zero. They don't start at one, they start at zero. So if we wanna look at the first item in the array, we need to look at the zero index of the array, or positions[0]. So positions[0] will point us to the very first item in the array. positions[1] will point us to the second value. So typing out positions[1] is the same thing as typing out the number 1000. And it goes on, positions[2] will represent 2000 and positions[3] will represent 4000. So as we move through the array, we're just increasing that position by one. So what we're gonna do is we're gonna keep track of our current position in the array and as we click on the next button, we're simply going to increase that current position by one and then scroll to that new position. So, again, we first have to store our current position. Which, by default, is gonna be 0 when we load the page. So, I'm gonna create another variable here called currentPosition, with a capital P there and I'm gonna set that equal to 0. This is gonna represent the index of the array that we want to look at. Now we need to remember to bring this number down back to 0. I just changed it to 500 so you won't be confused by the fact that we've got two 0s that we're looking at. These two 0s represent different values. So our current position by default when the page loads is 0, because we're on slide one at the very top of the page. So when we click on our button here, we want to navigate to the next position in the array. So, we're going to increase currentPosition by one. And there's a couple of ways to do that, but the quickest way is just to type currentPosition++. That's the same thing as saying currentPosition equals currentPosition plus one. So we're just increasing the value of currentPosition by one, and then we can look at that new position by typing position, and then we'll put currentPosition inside square brackets. So I told you before, let's clear something up real quick, I told you before that if you wanna look at the first item in the array, you would type the name of the array which is position and then 0, that will point us to the first item. However, if we store the current position in a variable, we can just change this here to the name of that variable. So typing out positions[currentPosition] is the same thing as typing out positions[0], because 0 is the value that's currently stored in currentPosition. And typing out positions[0] is the same thing as typing out whatever the value is for the first item in that array. So, let's get rid of that, and then after we increase the currentPosition here, when we click on the next button, we'll increase that currentPosition by one, and then we're going to navigate to that new position. So, when we navigate, instead of saying scrollTop + 1000 since that is no longer accurate, we're just going to navigate to positions and then inside square brackets we're gonna point to currentPosition. And again, that will take us to the next position in the array. Now as you can imagine, this won't keep working, we won't keep increasing because at some point we're gonna reach the end of the array. So we need to include some kind of functionality here to prevent us from continuing to increase this currentPosition variable. Because if we increase it too much, then it's gonna represent a number that doesn't even make sense anymore. So, we want to detect if the currentPosition is the last element in the array. If it is, we're not gonna do anything else. However, if we haven't reached that last element yet, we're going to allow our code to increase that value and then animate. So we're going to include an if statement here. So with an if statement, we have opening and closing curly brackets. And then inside the parentheses for the if statement, we're gonna have a condition that evaluates to either true or false. So we need to evaluate the currentPosition variable, and see if we've reached the end of that array yet. Now the highest index in that array is gonna be 3. Because remember there's four elements here, but it starts with 0. So 0, 1, 2, 3. So if currentPosition is equal to 3, then we're not gonna keep increasing it. We're only gonna keep increasing it if it's less than 3. So we're gonna say if(currentPosition is less than positions.length), this length value here will return the number of items in the array. The problem is, there are four items in the array, and if currentPosition is equal to 3, that means we are already at the end. But three is still less than four, so this would still increase currentPosition by one. So, what we need to do since it is a zero based array, is we need to check to see if currentPosition is less than positions.length- 1. And if currentPosition is less than three then we're still going to increase currentPosition by one and then animate. So all of this needs to be inside that if statement, so let's cut that, and then inside the if statement, we will past it. And then we need to tab that over and there we go. So again, we're only going to increase currentPosition if we haven't reached the end of this array yet. So, let's see if that works. We'll get rid of that extra line break there, save our file, jump back over to our browser. Scroll up to the top and refresh and let's see if that still works. We'll hit Next and we're just gonna cycle through all of the slides until we get to the end and everything looks good. So now let's just copy and paste that for the Previous button. We'll obviously need to change a couple of things, but let's just grab this whole button click event for btn-next. Copy it, skip a couple lines and we'll paste it, and then for this new copy, we're gonna change next to previous, that's the class name we gave to the previous button. We're still gonna prevent the default, we just need to change what's going on here. So first of all, if we're going to the previous position in the array, then we need to decrease the currentPosition variable. So instead of hitting ++ here, we're gonna say --, we're going to increase, I'm sorry decrease the currentPosition. So if we're at a value of 2000 if we're on slide three. Then when we click on the previous button, we want to decrease that currentPosition to 1, which will take us to slide two. Now, all of this will still be the same, we'll still animate the same way because we're just representing currentPosition here, but we're changing the ++ to a We also need to change what's in the if statement. Right now we're checking to see if we've reached the end of the array. But when we're going backwards, we need to check to see if we've reached the beginning. Because if we've reached the beginning, we don't wanna keep decreasing that value. We don't want it to go to a negative number. So this one is actually gonna be easier. All we need to do is make sure that currentPosition is greater than zero. If it is greater than zero, then we can still decrease it. We can decrease it down to zero. So let's get rid of all of this and just change that to greater than 0. And that should get us where we need to be. So if the currentPosition value is grater than 0, then we can still decrease it by one. So, let's save our file, jump back into our page. Scroll back at the top and refresh. And now let's navigate through using the Next button and that looks fine. So now we use the Previous button, it'll take us backwards one slide at a time. Now if we hit Previous again, we can't really tell if it's trying to work or not. But when we hit Next, we know that it is, because it automatically goes back to slide two. Which is at the second index of the array, which has a value of one. So if we hit the Previous button, if we were to keep hitting that over and over again, then that current index value would be a negative number. So when we hit Next, it would still be a negative number and it wouldn't take us to slide two. But we know that since it's taking us to slide two that it works just fine. And we can test the same thing once we get to the end of the animation. We can just hit Next a few times, and then if Previous takes us to the previous slide, then we know that our if statement is working right. Now we're still gonna have a few issues which we will adjust shortly. For example, let's say that we get to the very end and then, we manually scroll up to the beginning and hit Next. Nothing's gonna happen because that currentPosition variable is still set to the end of the array. So when we click on Next, it's not gonna keep increasing. Another issue we might have, let's say we refresh the page. We click Next to go to the second slide and then we scroll back up to the top. And then we're like no wait, I wanna see that second slide again, so we hit Next. But then it animates all the way down to the third slide because it's still keeping track of that variable. So we need to address these issues. But for now, we've got a really good starting point. So thank you for watching, and I'll see you in the next lesson.