This article walks you through a complete example that demonstrates how to create a back to top button with Tailwind CSS and a little vanilla Javascript (just a few lines). The purpose of this button is to help users quickly move up to the top of the page after scrolling down a large distance on a long (or very long) document.
Table of Contents
Example Preview
The scroll top button should only be shown when necessary. Therefore, it makes sense if it’s hidden when the user is at the top of the page. After the user scrolls down some, the button will appear. It has a fixed position, a round shape, and an indigo background. When the user clicks on the button, they will scroll smoothy to the top of the document.
Words might be confusing. Here’s how it works in action:
The Steps
1. Create some dummy content to make the page longer and implement the Scroll To Top button:
<body>
<!-- Just some dummy content to make the page longer -->
<main>
<section class="w-screen h-96 flex justify-center items-center">
<h1 class="text-4xl">Welcome to KindaCode.com</h1>
</section>
<section class="w-screen h-96 bg-green-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
<section class="w-screen h-96 bg-sky-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
<section class="w-screen h-96 bg-amber-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
<section class="w-screen h-96 bg-purple-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
</main>
<!-- Implement the Back Top Top Button -->
<button id="to-top-button" onclick="goToTop()" title="Go To Top"
class="hidden fixed z-90 bottom-8 right-8 border-0 w-16 h-16 rounded-full drop-shadow-md bg-indigo-500 text-white text-3xl font-bold">↑</button>
</body>2. Add Javascript code (before the closing tag </body>):
<!-- Javascript code -->
<script>
var toTopButton = document.getElementById("to-top-button");
// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function () {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
toTopButton.classList.remove("hidden");
} else {
toTopButton.classList.add("hidden");
}
}
// When the user clicks on the button, scroll to the top of the document
function goToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>The Complete Code
Here’s all the full source code that produces the example above:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.tailwindcss.com"></script>
<title>KindaCode.com</title>
</head>
<body>
<!-- Just some dummy content to make the page longer -->
<main>
<section class="w-screen h-96 flex justify-center items-center">
<h1 class="text-4xl">Welcome to KindaCode.com</h1>
</section>
<section class="w-screen h-96 bg-green-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
<section class="w-screen h-96 bg-sky-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
<section class="w-screen h-96 bg-amber-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
<section class="w-screen h-96 bg-purple-200 flex justify-center items-center">
<h1 class="text-4xl">Just Some Dummy Content</h1>
</section>
</main>
<!-- Implement the Back Top Top Button -->
<button id="to-top-button" onclick="goToTop()" title="Go To Top"
class="hidden fixed z-90 bottom-8 right-8 border-0 w-16 h-16 rounded-full drop-shadow-md bg-indigo-500 text-white text-3xl font-bold">↑</button>
<!-- Javascript code -->
<script>
var toTopButton = document.getElementById("to-top-button");
// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function () {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
toTopButton.classList.remove("hidden");
} else {
toTopButton.classList.add("hidden");
}
}
// When the user clicks on the button, smoothy scroll to the top of the document
function goToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>Conclusion
We’ve examined an end-to-end example of making a scroll to top button with Tailwind CSS and plain Javascript. This kind of button is very popular these days. If you’d like to explore more new and exciting things about modern web technologies, take a look at the following articles:
- How to Style the HR Element with Tailwind CSS
- How to Create Product Cards with Tailwind CSS
- Tailwind CSS: Expand a Text Input on Focus (without Javascript)
- Using Tailwind CSS with Font Awesome Icons: A Deep Dive
- Tailwind CSS: Create a Responsive Top Navigation Menu
- Tailwind CSS: Create an Animated & Closable Side Menu
You can also check out our CSS category page for the latest tutorials and examples.
