3 Simple Steps to Create a “Back to Top” Button Using HTML, CSS and JavaScript


Your website’s scroll behavior can have a big impact on your users. If your web page is really long, then a small button can be added to bring the user back to the top quickly to enhance user experience.

In this post, we’ll create a “Back to Top” button using HTML, CSS, and JavaScript.

Let’s jump right into it!🚀

To get started, you’ll need to create 3 files, namely index.html, style.css and script.js in your directory.

HTML Structure

To start, let’s write the following code in the index.html file.

In this HTML structure, I’ve created a button with the class “backToTop” and added an arrow character inside the button using a <span> element. Also, I’ve linked the CSS and JavaScript files to the document.


Create a "Back to Top" Button using HTML, CSS and JavaScript

But this button is at the top and doesn’t look nice.

So let’s add some CSS to make it visually appealing.

CSS Styling

Let’s write the following code in the style.css file. You can customize the styles according to your website’s design.


Create a "Back to Top" Button using HTML, CSS and JavaScript

This CSS style makes our button look good but it doesn’t have any functionality yet.

The button should appear when the user scrolls down, otherwise it should not be displayed.

To do it, add display: none; to your code in the .backToTop style. Now your code should look like this.

Now for the last step, add JavaScript code for functionality.

JavaScript Functionality

Let’s write the following code to the script.js file.

To see it working, add some content to your page. You can add the following content as well.

And here we have a “backToTop” button to enhance user experience.

Thanks for reading.

For more content like this click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Keep Coding!!

Leave a Comment