Create Animated Scroll-to-Top Button in Tailwind CSS
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/tailwindcss@2.2.19/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.w3wiki.net/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 > |
Output: