Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:18Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Back to Top Button

Having covered a great deal of theory, let’s now practice what we’ve learned with some exercises. To begin with, let’s see how we can create a “back to top” button.

3.1 Back to Top Button

Welcome to lesson number 12. This is the first of our five demos. And in this lesson we're going to create a back to top button. Now I'm sure you've seen this around. It's a very common pattern. And the way this works basically, you have a a web page and when you scroll past a certain point, you'll get a little back to top button somewhere on the page. Usually it's on the bottom part of the page, and when you click it, you're taken back up to the top of the page. So let's go ahead and see how we can create something like that using pure, or vanilla JavaScript if you want. Now taking a look at the markup here, we have a header with an idea of top. We're gonna use this ID to tell our script where we need to go back to. Then we have our main content with a bunch of paragraphs, and finally a footer. And in the footer, we have one anchor tag with an ID of back-to-top. This is our button. As far as styling is concerned, we just have some generic demo style here, nothing fancy, really. But what we're interested in is this back to top button, right? So its position is fixed. So no matter where we scroll, it stays in the same position. It's in the bottom right corner, three ems from each side. It's white with a 0.9 in the alpha channel. It's set to inline-block. Currently it has an opacity of 0, so we cannot see it. And we also have a class visible, which gives it an opacity 1. So, what we need to do basically, is when we scroll past a certain point in our page, we're gonna add that class to the button, making it visible. And we also have to listen to the click event on the button, and make our page scroll all the way back to the top. Now, I'm gonna write the script right here in the bottom of the page. And I'm going to start by defining some variables. And then what we're gonna do is calculate the document height, and we're gonna set the offset to a quarter of that value. And finally, we're gonna add event listeners for scroll and click. Right now for variables, we're gonna target the button, so btt. Back to top. We're gonna say document, and getElementById, back-to-top. Then we're gonna get the body to document body. docElem, that's gonna be document. documentElements, we'll be needing this when we calculate the height of our page, then we're gonna set the offset to 100, for example. And two more variables, we'll declare scrollPos, and docHeight. Now let's calculate the document height. We're gonna say docHeight = Math.max. Basically, Math.max will take a bunch of values and it's gonna return the biggest one, the maximum of those values. And the reason we're doing this is because different browsers will look at a document height differently. So for example, Firefox is gonna have a different syntax to get the document height, while WebKit is gonna have another one. So just to make sure we cover as many browsers as we need, we're doing this Math.max, and we're gonna pass in the following values. Body.scrollHeight, body.offsetHeight, docElem.clientHeight, and scrollHeight. And finally, we're gonna get the offsetHeight. Now we'll do a quick check if the documentHeight is different than undefined, which means if Math.max actually returns something. Which means if we actually have a height value, then we we're gonna set the offset to docHeight / 4;. This value, 100, is just a fallback, right, in case docHeight actually turns out undefined for some reason. Then we do have something to fall back on. Next up, we're gonna add the scroll event listener. And actually before that, let's go ahead and do a quick refresh here. And we'll go to our console, and call up the offset. And as you can see, the offset is 737.5, which means our script will be executed after we scroll past 737.5. Now for the scroll event listener, we're gonna do window.addEventListener. And we're gonna listen for a scroll, and we're gonna have a function. We're gonna get the scroll position equals to body.scrollTop. Or, in case that's not valid, docElem.scrollTop. Again, this is for various browsers. And then we're gonna say btt.className equals to if the scrollPos is higher than the offset, then we're gonna add the class of visible. Oops, sorry. The other way around. Otherwise, we're gonna add nothing. So that's what we're doing here, basically. This is the ternary operator if you remember, or the conditional operator. We're checking if the scroll position is higher than the offset, so basically if we passed that threshold when we scrolled, we add the class of visible to the button, to the BTT. Otherwise we add nothing to the class name. Okay, so let's have a quick look. Refresh and let's see, there it is. So when we scroll past that point, we make the button visible, and when we go back up, we're hiding it. Okay, now let's actually make this button work so when we click it, we want it to go to the very top. So, we're gonna say Add click event listener. btt.addEventListener, click again, function event. First thing we'll do is say event.preventDefault. And that's to make sure that the button, or in our case it's an anchor tag, it doesn't go anywhere. That's what this function is doing. And then we're going to check if our browser is Firefox, then we need to set the scrollTop value in a different way. So what we gotta do here is define another variable called isFirefox. And isFirefox, actually, this is very easy to do. We're gonna check for the navigator user agent. So, let me actually, I'm gonna say true here, just so we have valid code. But I wanna open the inspector here. And what I'm gonna do is say navigator.userAgent. And navigator.userAgent is gonna give us this bit, yeah? And an easy way to check if this is Firefox, well, it says Firefox right here. So all we gotta do is compare that string to the word Firefox. So, isFirefox will be equal to the following navigator.userAgent., we're gonna use a method called toLowerCase, which will take a string, it's gonna make it a lowercase. And then, I'm gonna say indexOf( "firefox" ) is higher than -1. All right so, if you don't understand what happened here, let me tell you. navigator.userAgent will give us that string you saw in the console. toLowerCase is gonna make everything lower case. And then indexOf( 'firefox' ) basically means at which position is the word Firefox In that string? And if it returns a position that's higher than -1, it means the word firefox is within that string, otherwise it isn't there. And this is a comparison, so it returns true or false. So coming back down here, we're gonna say if ( isFirefox ) then we're gonna say docElem.scrollTop = 0. Otherwise, we're gonna set body.scrollTop = 0. So now refresh, and when I'm down here I click the button. That's gonna take me back to the very top. And now that I think of it, I actually used, I actually said in the beginning that we're gonna use this ID to bring this back to the top. Not really necessary to be honest, because the way we're getting to top is, we're setting this property here, scrollTop = 0. So we might as well just get rid of this, unless it has value in styling, which I don't really think it does, no it doesn't. Okay, so we can actually get rid of this. That's about it for our button. Now a small but interesting project is a text box that supports auto completion. That will be demo number two, and will be coming in the next lesson.

Back to the top