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

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

Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

7.4k
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Author:
Krishna Gudpalle

4 years ago

21.1k
Listen on Spotify/Apple Music Button

Author:
Patricio Garcia

2 years ago

3.3k
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

1 year ago

1.7k
Phone Simulator with Built-in Car Racing Game and Play.
This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

Author:
Arjun Kumar

3 months ago

545
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

1 year ago

1.5k
App Store Button

Author:
Arya

4 years ago

10.7k
Simple buttons for links

Author:
Amit Pachange

3 years ago

11.6k
Upload button

Author:
Simon Scheffer

3 years ago

10.7k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

Author:
UI-Templates

11 months ago

984
Switch tabs button

Author:
gmer33

3 years ago

17.2k
Buy me a coffee floating button

Author:
Ron Hicks

3 years ago

15.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components