Back to Top Button with jQuery

Buttons allowing you to scroll back to the top of a page are quite common these days. Recently, I needed a back to top button for one of my SoftUni projects, and I did the necessary research so you don’t have to. You can see a live example at softuni.myowndesigns.info.

The idea here is when a user scrolls down past a certain point on a website, to see a button, allowing him to smoothly scroll back to the top. This is convenient and improves the user’s experience.

What you will need is to add HTML for the markup of the button, jQuery for its behavior and CSS for styling. Optionally, you may need to add Font Awesome for the up arrow should you wish to replace the button’s text with it.

You can download jQuery directly from jquery.com and then link to it from the head section of your HTML:

Alternatively, you can use a CDN:

In both cases, the minified version will do just fine.

Adding the HTML

Since the button has a fixed position, there isn’t a single best place you can place it in. I’ve placed it right after the closing footer tag and the closing body tag. Its markup is as follows:

Adding the CSS

It is a good practice to add the styles in a separate stylesheet. Just copy the code snippet below into it and adjust the colors for your site as necessary.

In order to avoid overlapping, setting the z-index to 100 is important!

Adding the jQuery script that does the magic

Create a new script.js file into a new “js” directory in the main directory of your site. Then link to it in the html file of your site this way:

Remember to add this line after the link to jQuery or it won’t work.
Now comes the time to add the script for the button into the script.js file we just created:

The important variables here are “offset” and “duration”. The first one determines when the button will appear and the second one controls the duration after which the button will become visible.

The back to top button now becomes visible on the right side of the footer and it slowly scrolls to the header and disappears when you click it:

If you wish to use a Font Awesome icon with the button, you should first add the necessary fonts before your custom stylesheet like this:

 

Then you must replace the button text with the Font Awesome icon as follows:

Congratulations! You have a fully-functional back to top button on your site…

2 thoughts on “Back to Top Button with jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *