Create Animated Scroll-to-Top Button in Tailwind CSS

Last Updated : 28 Feb, 2024

An animated scroll-to-top button is a user interface element that appears on a webpage when the user scrolls down. It allows the user to quickly return to the top of the page with a single click or tap. This feature is often implemented using CSS animations or transitions, and it can enhance the user experience by providing a convenient way to navigate long pages.

Approach:

Create a button element with an fav icon for the scroll-to-top functionality.
Use Tailwind CSS classes to style the button, such as fixed', 'bottom-4', 'right-4', 'bg-gray-800', 'text-white, and 'rounded-full '.
Use JavaScript to handle the button's visibility based on the user's scroll position.
Implement a smooth scroll animation when the user clicks on the button. Instead of instantly jumping to the top of the page, the scroll should be animated to provide a more polished and user-friendly experience.

Example: Implementation to create an animated scroll-to-top button using Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Animated Scroll-to-Top Button</title>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body class="bg-gray-100">

    <!-- Your website content -->
    <div class="h-screen bg-gray-300 
                flex items-center justify-center">
        <h1 class="text-3xl font-bold text-gray-800">
            About Us
        </h1>
    </div>
    <div class="h-screen bg-gray-300 
                flex items-center justify-center">
        <h1 class="text-3xl font-bold text-gray-800">
            Home
        </h1>
    </div>
    <div class="h-screen bg-gray-300 
                flex items-center justify-center">
        <h1 class="text-3xl font-bold text-gray-800">
            Contact Page
        </h1>
    </div>

    <!-- Scroll-to-top button -->
    <button onclick="scrollToTop()" 
            class="scroll-to-top fixed bottom-4 right-4 
                       bg-gray-800 text-white rounded-full 
                       transition duration-300 hover:bg-gray-700 
                       hover:text-gray-200">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240227155250/up.png"
             class="w-16 h-16 rounded-full bg-white" alt="">
    </button>

    <!-- JavaScript to handle scrolling -->
    <script>
        const scrollToTopButton = 
              document.getElementById('scroll-to-top');
      
        // Show button when user scrolls down
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 100) {
                scrollToTopButton.style.display = 'block';
            } else {
                scrollToTopButton.style.display = 'none';
            }
        });

        // Smooth scroll to top
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }              
    </script>

</body>

</html>