Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

3.5 Animating the Scroll Position

Hello and welcome back. I've gone through and finished up the CSS for the rest of our page, and I've stored all of that in the site 16 folder. And then we have one more small thing we need to do, and all the changes we make in this lesson will be saved in the site 17 folder. So the site 16 folder will be your starting point, and again, site 17 will be our final folder. So let's jump over to our browser and take a look at our page. So what was left was really pretty straightforward. Most of the remaining CSS just involved customizing these panels here. And I want to suggest that you go through all of that CSS and get familiar with how things were overwritten, how things were styled here, and how we put these panels together. Also take a look the two variations that we created. Remember in our HTML, we gave an extra class name to these middle two panels. One was blue top and one was shadow, I believe. And if we go in to our CSS under the choose section, you'll see that there is a rule for the blue top class, so any panel products that also has a class of blue top, the position is set to relative. And the reason we did that is because we created that blue top using the before pseudo class. So it's basically just a rectangle with the top left and top right corners rounded off, and it's got a blue background color. And so, you can look through that, see how that was done, and then the shadow was really easy. We just put a box shadow behind that particular object. If we scroll down further, you'll notice there's a lot of custom styles here for the text, and how everything is laid out there. So you can look through all of it to see how it all works. But once we come down to the subscribe section, you'll see we have the panel subscribe, and all of the rules for that as well. So all of that customization is there. It's very straightforward as far as CSS is concerned. And a lot of it is overriding Bootstrap files. And as I've mentioned before, if you're overriding a Bootstrap style, make sure you understand specifically what the rule is that that style is applied to in Bootstrap. And make sure that the rule you create is as specific at least as the Bootstrap rule that you're trying to overwrite. So there's one more thing I wanna do on this page. It has nothing to do with HTML and CSS. It's down here at the very bottom, it's this little button right here. This button is gonna scroll us back to the very top of the page and I'm gonna use an animated scroll here for this. So we're gonna jump back into our HTML now ,go down to the very bottom,grab that scroll bar and go down, and then just after our last script tag here,we'll skip a couple of lines. And I'm gonna create one more script tag to put in some custom JavaScript. Inside that script tag, I'm gonna use the jQuery function ready or the document ready function. And this is just what it looks like. What this means is that whatever goes inside this function is going to wait for the entire page to load before it actually runs. So what I'm gonna do in jQuery, and if you don't know jQuery that's okay, this is just a couple of lines of code. We're going to point to that button and we're gonna create a click event for that button, so that when we click on it, we're gonna animate the scroll top property of our entire window, of our HTML and body elements. We're gonna set that scroll top to 0. We're gonna animate it to 0. So the way we do that Is using a jQuery selector which is dollar sign and then parentheses. Inside the parentheses, we have quotation marks. And then, we're gonna point to the button and that button has an ID of btn-scrolltop. So since it's an ID, we're gonna type #btn-scrolltop which, again, is the ID for that button. And we're gonna do a click event. So we're gonna say On. And then inside parentheses and inside quotation marks, we're gonna say Click. After the closing quotation mark, we're gonna do comma, space Function. Open and closed parentheses, opening and closing curly brackets for that function, and then a semi colon at the end. Then in between those curly brackets, we're going to animate the scroll position. And the way we do that, is again, we're gonna use a jQuery selector with dollar sign parentheses and in quotation marks. And we're going to apply this to both the HTML and the body. One of these will handle webkit browsers, the other will handle other browsers. So once we point to both of those elements outside those parentheses, we're going to say dot Animate, which is a jQuery function. So you need to make sure that you are linking to jQuery as we are right here. And we're gonna run the animate function, so we have animate open and closed parenthes.. Inside those parenthesis we're passing in an object. So we're gonna do that using curly bracket. And then we can type in the property and value pairs of the properties that we want to animate. And we want to animate these scroll top property which is scroll and then Top with a capital T. Colon space and we're gonna scroll all the way up to the top which has a value of zero. And that needs to be inside quotation marks and then we'll put in a semicolon at the end of that line. Let's save that, jump back into our browser, refresh the page. And let's scroll all the way down to the bottom and then click on the button. And we see sure enough that it animates back up to the top. So that wraps it up for our page design. Thank you so much for watching, and I'll see you in the next video.

Back to the top