tutorial: back to top button!

hi everyone!! i hope you are doing great and that you are in the mood to learn something new!

I learned how to implement a back-to-top button that is only HTML and CSS!! it is surprisingly simple, but I haven't seen it on anyone's page before! so for that reason I am dusting off my blog to talk about it and trying not to cringe at my posts from a year ago

I am going to include a lot of detail about the what, why, and how, so that you can take over and customize your button however you like!!

also, this is my first time doing a tutorial! if this is hard to follow, I apologize in advance :') 

HTML (Making our button!)

so first we need a button of course! here is the code we're going to be using:

• <a href="#top" id="topButton"" title="go to top">↑</a>

note: it is probably advisable to put this in its own <div> if you know what you're doing, but for the sake of simplicity, we are just going to use <a>

to break it down: this is a link <a> which, instead of going to a different website, goes to spacehey.com/yourprofile#top - which is of course the top of your profile!

the link text is just an up arrow ↑. you may wish to change it to be text, like "jump to top" - if you do, just remember to adjust the text size and height/width when you get to css!

we are giving it an ID/name "topButton" so that we can edit it without the rest of our links being affected. 

we are also adding a title, a note that displays when you hover over it, but you can remove this if you really want to!

you may put this anywhere that supports html! that is your about me, your who I'd like to meet, or even your interests. I put this in my about me, just before my <style>. and speaking of style... 

CSS (Putting it in the right spot, and making it pretty!)

I'm going to jump right into the code, which is separated into three paragraphs: location, size/spacing, and appearance. each of these have its own section down below!

• #topButton {
• 
  
• /*location*/
•     position: fixed;
•     bottom: 5vh;
•     right: 5vw;
•     z-index: 999;
• 
  
• /*size/spacing*/
•     font-size: 6vh;
•     width: 9vh;
•     height: 9vh;
•     text-align: center;
• 
  
• /*appearance*/
•     color: #000000;
•     background: #1D4ED899;
•     text-decoration: none;
•     border-radius: 100em;
• 
  
• }

setting its location

we set our button's position to fixed, meaning it will always stay in the same spot, no matter where you scroll. this is nice because it means you don't have to scroll fully to the bottom to reach this button - you can always give up halfway oops

next we will set the position using bottom and right. instead of px, we are using vh and vw (view height and view width). this is so that no matter what size device you are on (even a smartphone!!) you will always see it in the bottom right corner.

1vh or 1vw = 1% of our screen's height or width. so we are setting our button to be 5% from the bottom and 5% from the right of the screen

lastly, we want our button to be on top of anything else! so we are setting the z-index to a nice big number, so nothing is likely to be on top of it. 

note: if you do want your button to be under certain elements - maybe you have a snowflake-falling effect for example - you just have to make that element's z index larger than your button's!

setting its size & spacing

we want our button to be big, noticeable, and clickable!! if people don't see it, they aren't going to click it. 

I am using vw and vh again just out of preference - for this you can use px, em, whatever units you like!

note: if you changed the text of your button, this is where you should make the font size smaller and/or the width/height larger

lastly, you should be sure to have the text in the button centered, otherwise it will be unevenly spaced when you manually set the width. that does not look nice, trust me! and speaking of...

setting its appearance

ah yes, making it pretty, the most important part of CSS. first we are setting the text color and background color. 

you may be thinking, isn't that too many digits for a hex code?? usually yes, but when editing CSS, you can add two two digits on the end to set the alpha/transparency. neat!

the last two lines get rid of the underline (which is very annoying for the ↑ emoji, because it goes through it), and make our square into a circle. also neat!

CSS #2 (But wait, there's more!)

did you think we were done? there's always more you can do with CSS, and in this case we are making our button responsive! this makes it clear to users that it is a button/link, and it's very simple:

• #topButton:hover {
• 
  
•     color: ffffff;
•     background: #60A5FA99;
• 
  
• }

all the other junk (location and size) was taken care of in the last section, so we are just changing the colors around. think of how when you hover over a link, it changes color, telling you it's clickable - we want to do that!

with that, we are done!! hopefully this was helpful for you guys.

if it was, feel free to add kudos and a comment so I can see it in action on your page!

if you are having trouble, please leave a comment or IM me so I can help you figure it out :)

have a wonderful rest of your night, and happy customizing!