Home
Michael Andreuzza
scroll to top buton with Tailwind CSS and Alpinejs

scroll to top buton with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Button

Author Michael Andreuzza

1.5k

Fork Fullscreen

<section class="bg-white relative overflow-hidden">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 lg:py-96 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto w-full">
   <div>
    <h1>Scroll to Top</h1>
    <p class="text-balance">
     Scroll down to see the scroll to top button, and click on it to go
     to the top.
    </p>
   </div>
  </div> 
  <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" style="display: none;"> <button title="Scroll to top" aria-label="Scroll to top" @click="window.scrollTo({ top: 0, behavior: 'smooth' })" class="inline-flex items-center gap-x-2 rounded-full bg-orange-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 w-full">
    scroll to top
   </button> </div> 
  <div class="mt-6 border-t pt-12 max-w-xl mx-auto w-full">
   <div class="prose prose-sm text-gray-500">
    <h1 id="about">about</h1>
    <p>Brief Facts About Me</p>
    <ul>
     <li>
      Born in London on the 80s at St Thomas’ Hospital Medical School.
      My father is Italian, and my mother is a Spaniard.
     </li>
     <li>Raised in the north of Italy and south Spain.</li>
     <li>
      I lived most of my life in Borgosesia, Vercelli Italy, gorliz,
      bilbao and Torrevieja, Alicante, Spain.
     </li>
     <li>Passionate about drawing cars.</li>
     <li>Lifelong surfer.</li>
     <li>Fluent in Castilian Spanish, English, Italian, and Swedish.</li>
     <li>Served as a lifeguard on the Spanish coast.</li>
     <li>
      Moved to Harrogate in 2009 in my 20s to explore life in the UK.
     </li>
     <li>Returned to Spain seeking the warmth and sunshine I missed.</li>
     <li>Relocated to Helsinki with my wife in 2011.</li>
     <li>Now living in the Åland Islands.</li>
     <li>Proudly a father and a husband.</li>
     <li>
      Inspired to pursue web development after tweaking my Android phone
      settings.
     </li>
     <li>
      Launched my first project, <a href="https://colorsandfonts.com">Colors and Fonts</a>, in 2018 and have been actively building since.
     </li>
     <li>
      Developed 4 projects on a laptop with a failing and falling
      screen; two were acquired in 2022.
     </li>
     <li>
      Began building <a href="https://lexingtonthemes.com">Lexington Themes</a> and <a href="https://windstatic.com">Windstatic</a> in 2022, officially
      launched in February 2023.
     </li>
     <li>I admire simplicity and clarity in design.</li>
     <li>
      Consistency is my go-to resource in both life and work, guiding my
      approach to web development, project management, and personal
      growth.
     </li>
    </ul>
    <p>
     Reflecting on my journey from the diverse landscapes of Italy and
     Spain to the innovative tech scene in the Åland Islands, I’ve
     embraced the challenges and opportunities each move presented. My
     passion for design, development, and entrepreneurship drives me
     forward, with consistency as the cornerstone of my success. As I
     continue to explore new ventures and creative projects, I remain
     committed to the simplicity and clarity that define my work and life
     philosophy.
    </p>
    <p>
     Thank you for taking the time to learn a bit about me. I’m excited
     for what the future holds and look forward to the continuous
     evolution of my projects and personal endeavors. Have a beautiful
     day.
    </p>
    <p>Michael Andreuzza</p>
   </div>
  </div> 
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create a scroll to top with Tailwind CSS and Alpinejs
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-scroll-to-top-button-with-tailwind-css-and-alpinejs" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/scroll-to-top/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Related Examples

Join now button
Attractive button for the CTA section

Author:
Matej Kovač

1 year ago

2.1k
Button with shadow

Author:
Laurits

2 years ago

11.4k
Download on the App Store light button

Author:
Simon Scheffer

2 years ago

12.3k
shadcn Button
button

Author:
Cristian

9 months ago

1.7k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

1 day ago

7
Menu button

Author:
Freja Jensen

2 years ago

14.3k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

9 months ago

1.7k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

3 months ago

717
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
Banshee

1 month ago

42
Gradient shadow button

Author:
Manon Daniel

2 years ago

15.8k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

1 year ago

11.3k
Tab Menu
Tab menu

Author:
Samuel Abera

1 year ago

5.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components