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.
Use cases:
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 relveant 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!
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Lexington
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.