Introduction
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Back To Top</title>
</head>
<body>
<button class="backToTop">
<span>⮝</span>
</button>
<script src="script.js"></script>
</body>
</html>
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.
Output:
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.
.backToTop {
height: 50px;
width: 50px;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
font-size: 24px;
border: none;
outline: none;
background-color: #111111;
color: white;
cursor: pointer;
border-radius: 50%;
transition: all ease-in 0.3s;
}
.backToTop:hover {
background-color: #fff;
color: #111111;
border: 2px solid #111111;
font-size: 30px;
}
Output:
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.
.backToTop {
display: none; /*To hide the button initially*/
height: 50px;
width: 50px;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
font-size: 24px;
border: none;
outline: none;
background-color: #111111;
color: white;
cursor: pointer;
border-radius: 50%;
transition: all ease-in 0.3s;
}
.backToTop:hover {
background-color: #fff;
color: #111111;
border: 2px solid #111111;
font-size: 30px;
}
Now for the last step, add JavaScript code for functionality.
JavaScript Functionality
Let's write the following code to the script.js file.
// Get the button
const backToTopBtn = document.querySelector(".backToTop");
//Listens for the scroll event and shows the button when the user scrolls down by more than 20 pixels.
window.addEventListener("scroll", () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
backToTopBtn.style.display = "block";
} else {
backToTopBtn.style.display = "none";
}
});
// When the button is clicked, it smoothly scrolls the page back to the top.
backToTopBtn.addEventListener("click", () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
To see it working, add some content to your page. You can add the following content as well.
<div style="height: 2000px; border: 1px solid black">Top of the page.</div>
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!!
Top comments (2)
Very good subject!
Thanks for checking out!😊