FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.4 Detecting the Current Position

To finish up our navigation, we need to detect the current scroll position of our page and set the currentPosition variable when the page loads. Once you're done, the page should animate perfectly, no matter where the scroll position is when the page loads.

5.4 Detecting the Current Position

Hello, and welcome back to Scroll Events Made Easy. As we discussed in the last lesson, our Previous and Next buttons are a little bit limited right now, because we don't really know for sure where we are on the page. For example, let's say that we hit the Next button a few times and then we scroll back up to the top. Once we get back to the top, we expect that when we hit the Next button it will take us to slide two, but instead if we hit the Next button now it takes us all the way to slide four which is definitely not what we want. Also, if we're at slide four and we just refresh the page, the scroll position will stay where it was before we refreshed but all of the JavaScript will completely refresh. So our current position is set back to zero and if we hit Next now which shouldn't do anything at this point, it will actually navigate back to slide two. So what we need to do is when the page first loads, or when we scroll up and down, we need to detect our current position before we do anything else. So let's jump into our code. We are now working in the site21 folder, so all the changes we make in this lesson will be saved there. And I'm gonna create a whole new function here, so I'm gonna scroll down. Just before our closing script tag we're gonna create a new function. And I'm gonna call it getCurrentPosition. And that's what a function looks like. And you can call on this function anytime you want to perform whatever logic is inside this function. So inside this function, I'm gonna create a variable called position, and then we're gonna run through a series of checks to determine what that position needs to be set to. And that position is going to represent which element in the array we need to go to. But before we can determine that, we need to know where we are on the page. And so we're gonna store that in another variable, and let's call it scrollPosition. And we're gonna set that equal to, and we've seen this before, document inside that jQuery selector. So, $ (document).scrollTop();, to end your statement. So this will give us the value in pixels of our current scroll position. And we'll store that in this variable, called Scroll Position. And one thing we know for certain is that if scrollPosition is equal to 4,000 on this page then we are at the very bottom of the page and our current position should be set to three which represents the last element in our array. Now before I go any further, let me point something out to those of you who have been using JavaScript for years. First of all, if you have then you probably don't need this tutorial. But secondly, I'm gonna keep things pretty simple here. There are more dynamic ways to do what I'm about to do, such as passing the array into this function in order to dynamically determine where we need to go. So I'm gonna do this in a very manual way but I'm doing this, because this is aimed for beginners, and I don't want to overwhelm you too much. I do wanna try to get you to the next level and to help you learn a little bit, but I'm gonna want to keep it pretty simple. So keep in mind that there are better ways to do what we're about to do, but what we are about to do will still work. So again I'm just trying to keep it at a very basic level so that everyone can understand. So what we're doing is we're going to, we've set scroll position equal to whatever we're calculating here. So wherever our browser is scrolled to, that's gonna be stored in our scroll position variable and then as I mentioned, if that scroll position that we just calculated is equal to 4,000, then we know that we need to be at the very end of the position's array. Remember, our position's array has four elements in it. The last position in that array is going to be at an index of three, so we're going to set position equal to three. So again, if our scroll position is 4,000, we know that we've scrolled all the way down to the bottom of the page. If we're at the bottom of the page, then that position is gonna be set to 3. If we're not at the bottom of the page, so I'm gonna say else if and we're gonna have another conditional statement here. We're gonna check to see if scroll position which again is the position that we calculated up here, we're gonna check to see if that is greater than or equal to 2000 remember 2000 is the location of slide three. 4000 is the location of slide four and 2000 is the location of slide three. So after that, after we perform that conditional, we need another set of curly brackets, and inside that curly brackets we're going to type what happens if this is true. So, we're going to start off to see if, in fact, instead of equals to, and you'll notice there are two equals here. So, if you're checking to see if one thing is equal to another, we need a double equals sign. However, just to make sure I'm covering all my bases, I'm actually going to say greater than or equal to 4,000. Even though it never really be greater than it's a good idea to make sure that all your bases are covered. So if it's greater than or equal to 4,000 we know we need to be at that last position, position of three. Else if our scroll position is at least 2000, but not quite yet up to 4000 then I'm gonna set our position = 2. Now let me explain that a little bit. If our position is 2, and we click on the next button it will take us to slide four, it will take us to the end of slide four which is what we want. Even if we were somewhere in between those two positions, if we're in between slide three and slide four, if we hit the next button we want it to take us to a position of three. Which means that we click the next button it's going to increase this value by one so it will increase it up to three, then that it will take us to that last slide. So you can probably imagine what I'm gonna type next. We're gonna say else if again, and we're gonna check scrollPosition to see if it's greater than or equal to the position of slide 2 which is 1000. If it is greater than or equal to 1000, we'll set position equal to one, otherwise, we don't need another if statement here, we just need an otherwise. One final else, we're gonna set position equal to zero. So we're kind of going down in order here. So now anytime we need to know what our current position is, we can call this getcurrentposition function. Now again, this is kind of a dirty function here, in the sense that if anything ever changes with your array, if you ever change what these, let's scroll back to scrolled too much there. To this positions array. If you ever change any of these values, or if you ever add a new slide to the array and you suddenly have another value, then this function is going to get broken. So, again, there are cleaner ways to write this, so that even if you change that array this will still give you the right value, but again I just want to keep it simple. So that everybody can really grasp this, even if you don't have a whole lot of JavaScript experience. So let's think back to what our original problem was. One of the problems which I'm gonna address first is that if we do some manual scrolling or even if we just hit the next button a few times to scroll down to slide two, three or four and then we hit refresh to refresh the page. Everything is gonna get reset. That current position variable is going to get reset to zero even though the page is still scrolled down to the bottom. So that's gonna mess up the functionality of our next and previous buttons. So one thing we need to do when the page first loads, instead of just automatically setting that current position value to zero, we need to run this get current position function first. To determine what that position value really needs to be. So, we've created this position variable inside this function. But even if we call this function right now, it's not going to work. What we need to do is we need to return that value once we've assigned it a value, so we've assigned it a value in each of these else statements, and then we have this one last else which will catch all other values. So no matter what, by the time we get to the end of this if statement, the position variable will have a value. And in order to pass that value to whatever is calling this method we just need to return that value. So we're gonna say return position. So then calling this getCurrentPosition method will be the same thing as calling whatever this position value is so let's do that. Let's scroll back up to when the page first loads. We create the positions array and then we're setting current position to zero. That's where the problem is. Because we don't really know where our current position is when the page fists loads unless we check it. And so we need to check it first. So instead of setting it to zero, we're gonna call getCurrentPostion, that method that we just created. So make sure that you use open and close parentheses there at the end. And then a semicolon to end your statement. So let's see if that does the trick for us. We're gonna save our file. Jump back into our browser. Scroll up to the top, and we'll refresh the page here. We'll see that our Next button works just fine, and our Previous button works just fine. So let's stop here on slide three and let's refresh. Now last time we did this, if we were to refresh and then click on the next button it would take us to slide two because the current position variable had reset itself to zero. And then it would increase to one which would take us to slide two but now that we're checking the current position whenever the page first loads, if we hit the next button now. You'll see that it actually takes us where we expect it. It takes us to slide four. Similarly, let's say that we're on slide two here, so we refresh the page, and previously, if we were on slide two and refresh the page, then we hit the previous button, it wouldn't do anything, because the value's already set to zero. It's not gonna go down anymore so nothing would happen. But now if we hit previous, you'll see it takes us back to slide one. However, we still have one more issue to address and we'll take care of that in the next lesson, and thank you for watching

Back to the top