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.7k

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

Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

4 months ago

873
Buttons with border bottom

Author:
Prashant

2 years ago

12k
Old style Button Designs

Author:
Amit Pachange

2 years ago

9.5k
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Author:
Kavita Joshi

1 year ago

7.4k
Interactive "Morphing" Play/Pause Button

Author:
Anonymous

6 months ago

938
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

8 months ago

989
IMDB score and votes box

Author:
Darius G

1 year ago

8.4k
Continue with Google button
Login with google button for social login.

Author:
S. Patel

2 years ago

23.4k
shadcn Button
button

Author:
Cristian

11 months ago

1.9k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

2 months ago

300
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

1 year ago

10.4k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components