Learn how to create a sleek and functional “Scroll to Top” button using HTML, CSS, and JavaScript with our step-by-step guide. Boost user experience and engagement on your website while improving your search engine optimization (SEO) efforts. Start implementing this handy feature today!
Creating a “Go to Top” button on a website is a useful feature that improves user experience. Users can easily navigate back to the top of the page without having to manually scroll through long pages of content. In this tutorial, we will explore how to create a “Go to Top” button using HTML, CSS, and JavaScript.
The HTML Code
We begin by creating the basic HTML code for our page. In the example code provided, we have a navigation bar, a heading, and multiple articles that contain text. At the bottom of the page, we have a button element with an ID of “go-to-top-button” and a class of “btn hidden”. The class “hidden” is used to hide the button until it is needed.
<body>
<nav>Navigation</nav>
<h1>Scroll down</h1>
<main>
<article>
<h2>Subtitle</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
pariatur dolor ipsa repudiandae, veritatis, repellat veniam
perferendis dolorum vitae vero eos earum dolore id accusantium sunt
sint delectus! Laborum, cum!
</p>
</article>
<article>
<h2>Subtitle</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
pariatur dolor ipsa repudiandae, veritatis, repellat veniam
perferendis dolorum vitae vero eos earum dolore id accusantium sunt
sint delectus! Laborum, cum!
</p>
</article>
<article>
<h2>Subtitle</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
pariatur dolor ipsa repudiandae, veritatis, repellat veniam
perferendis dolorum vitae vero eos earum dolore id accusantium sunt
sint delectus! Laborum, cum!
</p>
</article>
<article>
<h2>Subtitle</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
pariatur dolor ipsa repudiandae, veritatis, repellat veniam
perferendis dolorum vitae vero eos earum dolore id accusantium sunt
sint delectus! Laborum, cum!
</p>
</article>
<article>
<h2>Subtitle</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti
pariatur dolor ipsa repudiandae, veritatis, repellat veniam
perferendis dolorum vitae vero eos earum dolore id accusantium sunt
sint delectus! Laborum, cum!
</p>
</article>
</main>
<button id="go-to-top-button" class="btn hidden">Go to Top</button>
<script src="scrollToTopBtn.js"></script>
</body>The CSS Code
Next, we add CSS styling to our page. We set the margin and padding of all elements to 0, and set the font-family to sans-serif. We also give the navigation bar a background color of #2a4fd2 and a text color of white. The heading has a font size of 4rem and a bottom margin of 2rem. The h2 and p elements have a margin of 1rem.
We also set a margin-top of 100vh on the last article. This creates empty space at the bottom of the page that is equal to the height of the viewport. This space allows users to scroll past all the articles and trigger the appearance of the “Go to Top” button.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
background: #2a4fd2;
color: #fff;
padding: 1rem;
margin-bottom: 2rem;
}
h1 {
font-size: 4rem;
margin-bottom: 2rem;
text-align: center;
}
h2,
p {
margin: 1rem;
}
article:last-child {
margin-top: 100vh;
}
#go-to-top-button {
position: fixed;
bottom: 20px;
right: 20px;
background: #2a4fd2;
color: #fff;
opacity: 0.5;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#go-to-top-button:hover {
opacity: 1;
}
.hidden {
display: none;
}
Finally, we style the “Go to Top” button with a fixed position at the bottom right corner of the screen. We give it a background color of #2a4fd2, a text color of white, and a border-radius of 5px. We also set the opacity of the button to 0.5 and change it to 1 on hover. We use the “hidden” class to hide the button initially.
The JavaScript Code
Finally, we add the JavaScript code to implement the functionality of the “Go to Top” button. We start by selecting the “Go to Top” button using its ID and assign it to the variable goToTopButton. We add an event listener to the window object that listens for scroll events and triggers the scrollFunction when the user scrolls on the page.
The scrollFunction checks the vertical distance that the user has scrolled from the top of the page using document.body.scrollTop and document.documentElement.scrollTop. If the user has scrolled more than 300 pixels, we display the “Go to Top” button by changing the style.display property of the button to “block”. Otherwise, we hide the button by setting its style.display property to “none”.
const goToTopButton = document.getElementById("go-to-top-button");
window.onscroll = () => {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 300 ||
document.documentElement.scrollTop > 300
) {
goToTopButton.style.display = "block";
} else {
goToTopButton.style.display = "none";
}
}
goToTopButton.addEventListener("click", () => {
goToTopButton.style.display = "none";
window.scroll({
top: 0,
behavior: "smooth",
});
});
Finally, we add a click event listener to the “Go to Top” button that triggers the goToTop function when the button is clicked. This function hides the button by setting its style.display property to “none”, and scrolls the window back to the top of the page using the window.scroll method. We also set the behavior of the scroll to “smooth” to make the scrolling animation smoother.
In conclusion, this tutorial has shown you how to create a “Go to Top” button using HTML, CSS, and JavaScript. This feature can improve user experience on your website by making it easier for users to navigate back to the top of the page. By implementing this feature, you can make your website more user-friendly and improve the overall user experience.