FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Animated Scrolling With jQuery

Hello and welcome back to Scroll Events Made Easy. Now that we know how to create a click event listener for our buttons, I want to show you how to animate the scroll position of your document using jQuery as well. So in order to animate the document itself, we need to point to the root or the html and body elements of our document. And the way we're gonna to do that, is we're going to come up here and create a new variable called $root. And we're gonna set this variable equal to a jQuery selector, and inside that selector, and inside quotation marks, we're gonna point to the html element as well as the body element. So when we refer to this variable root, we're gonna be referring to both of those elements. And that's how we're gonna get our scrolling taken care of. We're gonna scroll both of those elements just to make sure that we've got our bases covered. So, inside our click function, whenever we click on that Next button, we want to scroll up 1000 pixels or scroll down 1000 pixels, however, you wanna think about it. So the way we do this is we point to the object that we're animating, which is in this case the root object that we just created and stored in a variable and we're gonna say, root .animate(). There's a function in jQuery called animate. And inside the parentheses for animate, we need a set of curly brackets to create an object, and this object is going to have some key value pairs or some property value pairs. We're gonna type in the name of the property that we're going to animate and then separate it by a colon, we're gonna have the value that we want to animate to. So the property we're animating here is called scrollTop. And notice it's lowercase s, but a capital T in Top. So the name of the property is scrollTop, then we'll type colon space, and then the value that we want to scroll to. Well, I want to scroll to a value of 1000 pixels. That's how we get from slide 1 to slide 2, right? So that's our property, but we need one more thing inside this animate function. After our property and after the closing curly bracket for that property. Now, make sure you're not doing the closing curly bracket for the button click event. Make sure it's for this animate function here. After the closing bracket there, the closing curly bracket but before that closing parenthesis, I'm gonna type comma space and then a number value that's going to represent the duration of the animation in milliseconds. So if we want it to last 1 second, we're gonna type 1000, because 1000 milliseconds equals 1 second. So again, we're animating this scrollTop position over the course of 1000 milliseconds, so it's gonna take 1 second, we're gonna animate it from its current value which at page load will be 0 to a value of 1000. So lets see if that works. Let's save our html page. We are now in the site 19 folder. We'll jump into our browser and refresh, and let's see if that works. I'll click on Next. And sure enough, we animate from slide 1 to slide 2. Now the problem is, if we click Next again, there's really nowhere to go, so it just kind of refreshes where it is. Now if we scroll down, we'll see another issue, and then when we click on Next, it's gonna scroll back down to that second slide. And so, we obviously need a little more flexibility in our JavaScript but that gets us started. So with our Next button, we usually want to animate to the next 1000 pixels. Right now, it's just animating to a value of 1000. But what we wanna do is we wanna look at the current value and increase it by 1000, so let's try that. I'm gonna jump back into brackets, and instead of hard coding this value here to 1000, what I wanna do is I wanna look at our current position. And then, just increase that by a 1000. So the way we get our current position, let's go ahead and delete this for now. The way we get our current position using jQuery is we're gonna point to the document itself using a jQuery selector, so we're gonna type $. And then inside parentheses, I'm gonna type out the word document. So that will point to the document itself. And then I'm gonna use the scrollTop method which will return the current, I didn't mean to put a semicolon there. The scrollTop method will return a value which represents the current scroll position of the page. So if we look at the current scroll position of the page, and then simply add 1000 to it, hopefully that will get us where we're going, so let's give that a shot. Let's save our file. Jump back into our browser, scroll up to the top and refresh, and now let's try it. We click on Next, it increases it by a 1000 by taking it to the next slide, let's try again. We'll hit Next, and sure enough it takes us to the third slide. Next, one more time, and it takes us to the fourth slide. Now our fourth position isn't exactly what we were going for, because we want this ship to animate all the way up to the top, but that's something we'll get to pretty soon. For now, we can click on Next again and it will continue animating everything off. Now the only problem with this is, if we scroll up manually somewhere in between slides and click on the Next button, you'll see that it's just going to scroll up 1000 pixels, no matter what. It's not gonna take us necessarily to the next slide position, it's just going to move up 1 000 pixels. So obviously, we need to do a little work there as well. But that's a good start. So thank you for watching and we'll continue in the next lesson

Back to the top