7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 20Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.1 Create a Fixed Back to Top Button

An element that’s widely used in website is a back to top button that’s usually positioned in the lower part of the page. The cool about is that it doesn’t scroll along with the page. Instead, it stays in the same spot.

So let me show how that’s made.

6.1 Create a Fixed Back to Top Button

An element that's widely used in websites is a Back to Top button. That's usually positioned in the lower part of the page. Now, the cool thing about it is that it doesn't scroll along with the page. Instead, it stays in the same spot. So, let me show you how that's made. I have a page here with a bunch of text, a few paragraphs. Right at the bottom, it says back to top. The code here says A, so it's a simple link with a class of back to top. So lets go ahead and style that. First, we're going to start with a background color, so we can see it better. Black, this is actually a fall back. We're going to do this again with an rgba. Because we want the button to be kind of transparent. Let's do about 0.75 opacity. Okay, there we go. So, the reason I did this is if there is no rgba support in the browser, then you use the black color. Next, let's do this. This is the magic. Right here. Position fixed. Now, position fixed means that that button will stay wherever you put it, no matter if you scroll or not. So let's give it some position. I'm gonna set it to bottom 2 ems and a right 2 ems. And that will put it right here, 2 ems from the right, and 2 ems from the bottom. So if I scroll, the button stays right there. All right, let's do some additional styling here. Let's see, let's change the color to white and let's give it a padding, like .5 ems on top and bottom, 1 em left and right, just like that. Also, text transform, let's do uppercase. Okay, and maybe the font size a bit smaller like 11 pixels. Let's do the font weight bold. All right, perfect. Finally, let's add hover state so Back to top, hover. We'll simply change the text color to something like, 69bbd2, which is a blue color. All right. That is the back to top button. Now, of course, when you click it, it goes to the top of the page because in the HTML, look, we have the href set to dash top, and our header here has the ID of top. So that's why this whole thing works. Now normally this is only half of the whole system. There's also a JavaScript component that shows or hides the button depending on scroll bar position. But that's beyond the scope of this lesson. However, check out the lesson notes. I've added a link to an older tutorial of mine, demonstrating, this technique.

Back to the top