Home
Abdul Baset Bappy
Floating "Go to Top" Button with Tailwind CSS

Floating "Go to Top" Button with Tailwind CSS

🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling.

✔️ Smooth scroll to top
✔️ Clean and modern design
✔️ Responsive and animated effects

Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

This tailwind example is contributed by Abdul Baset Bappy, on 26-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button Other

Author Abdul Baset Bappy

Fork Fullscreen

<body class="relative h-[2000px] bg-slate-100 dark:bg-slate-900">
  <h1 class="text-6xl font-extrabold text-center pt-40 dark:text-slate-100 text-slate-900">Scroll Down ⬇ To see the Button</h1>
  <button id="goTopBtn"
    class="fixed bottom-20 right-8 z-50 w-16 h-16 hidden rounded-full bg-slate-950 dark:bg-slate-500 p-4 text-white shadow-lg transition-all duration-300 hover:bg-slate-800 hover:scale-110  hover:shadow-xl active:scale-90"
    onclick="scrollToTop()">
    
     <i class="fas fa-chevron-up text-xl"></i>
  </button>

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

Related Examples

Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

1 year ago

1.5k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 year ago

893
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

11 months ago

968
Lots of button examples
tailwind button examples

Author:
QQ-VVN

10 months ago

605
button animation
button animation big

Author:
QQ-VVN

10 months ago

1k
Life Tree
by salvator

Author:
Baraka Salvator

10 months ago

992
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

8 months ago

537
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

4 months ago

608
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

2 months ago

231
Button
Button with scale animation on hover and translate-y on active

Author:
Nabile BABABODI ABOUDOU MOUTAROU

2 months ago

81
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Author:
Ayyamperumal S

1 week ago

85
Typewriter effect
using javascript

Author:
Samuel Dawson

3 years ago

42.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components