In this tutorial, we’ll be creating a scroll to top button using Tailwind CSS and Alpine.js.
A scroll to top button is a button that appears at the bottom of a webpage when the user scrolls down. It allows the user to quickly return to the top of the page. This is useful for websites that have a lot of content and want to make it easier for users to navigate back to the top.
Understanding the code:
x-data="{ isVisible: false }"
: This is the data that will be used to store the visibility of the button.x-init="window.addEventListener('scroll', () => { isVisible = window.scrollY > 100; })"
: This is the event listener that will be added to the window object.class="fixed bottom-6 right-6 z-50"
: This is the class that will be added to the button.x-show="isVisible"
: This is the condition that will be checked when the button is shown.x-transition:enter="transition ease-out duration-300"
: This is the enter transition that will be applied when the button is shown.x-transition:enter-start="opacity-0 transform translate-y-2"
: This is the enter start transition that will be applied when the button is shown.x-transition:enter-end="opacity-100 transform translate-y-0"
: This is the enter end transition that will be applied when the button is shown.x-transition:leave="transition ease-in duration-300"
: This is the leave transition that will be applied when the button is hidden.x-transition:leave-start="opacity-100 transform translate-y-0"
: This is the leave start transition that will be applied when the button is hidden.x-transition:leave-end="opacity-0 transform translate-y-2"
: This is the leave end transition that will be applied when the button is hidden.<button
: This is the button element.title="Scroll to top"
: This is the title attribute that will be added to the button. For accessibility purposes, it is recommended to use a descriptive title that accurately describes the button’s purpose.aria-label="Scroll to top"
: This is the aria-label attribute that will be added to the button. For accessibility purposes, it is recommended to use a descriptive aria-label that accurately describes the button’s purpose.@click="window.scrollTo({ top: 0, behavior: 'smooth' })"
: This is the event listener that will be added to the button.Classes are removed for brevity and clarity within the code, but I’ll keep those classes relevant to the tutorial.
<div
x-data="{ isVisible: false }"
x-init="window.addEventListener('scroll', () => { isVisible = window.scrollY > 100; })"
class="fixed bottom-6 right-6 z-50"
x-show="isVisible"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform translate-y-2">
<button
title="Scroll to top"
aria-label="Scroll to top"
@click="window.scrollTo({ top: 0, behavior: 'smooth' })"
>
scroll to top
</button>
</div>
This is a simple scroll to top button that can be used for any type of content, such as blogs, e-commerce, landing pages, social media, or webinars. The code is easy to understand and the structure is clear. The use of Tailwind CSS and Alpine.js makes it easy to style the button and add interactivity. Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!