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 v3.4. It is responsive.

Button

Author Michael Andreuzza

Tailwind v3.4 2.7k 7

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>