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

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

Elevated buttons

Author:
Leon Bachmann

2 years ago

14.1k
Button with shadow

Author:
Laurits

2 years ago

12.1k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.8k
Fancy leaf like button

Author:
_Amar_

2 years ago

11.6k
Plug and Play Button - Animated gradient background
Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

10 months ago

1.6k
Button
Material Button

Author:
Akram Khan

1 year ago

1.8k
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

6 months ago

807
Sign in with facebook button

Author:
Conan Hilton

2 years ago

10.8k
hero page
by salvator

Author:
Baraka Salvator

3 months ago

718
Buttons in pair

Author:
Amit Pachange

2 years ago

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

7 months ago

1.3k
3D button with hover effect!

Author:
Laurits

2 years ago

17.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components