Tailwind CSS Scroll Back To Top Button

        
            
      <!-- Back to top button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="!fixed bottom-5 end-5 hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"
        id="btn-back-to-top">
        <span class="[&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
          </svg>
        </span>
      </button>

      <!-- Explanation -->
      <div
        class="container mx-auto mt-4 text-center dark:text-white"
        style="height: 2000px">
        <p class="mb-4">
          Start scrolling the page and a strong
          <strong>"Back to top" button </strong> will appear in the
          <strong>bottom right corner</strong> of the screen.
        </p>
        <p>Click this button and you will be taken to the top of the page.</p>
      </div>
      
        
    

        
            
      import {
        Ripple,
        initTWE,
      } from "tw-elements";

      initTWE({ Ripple });

      // Get the button
      const mybutton = document.getElementById("btn-back-to-top");

      // When the user scrolls down 20px from the top of the document, show the button

      const scrollFunction = () => {
        if (
          document.body.scrollTop > 20 ||
          document.documentElement.scrollTop > 20
        ) {
          mybutton.classList.remove("hidden");
        } else {
          mybutton.classList.add("hidden");
        }
      };
      const backToTop = () => {
        window.scrollTo({ top: 0, behavior: "smooth" });
      };

      // When the user clicks on the button, scroll to the top of the document
      mybutton.addEventListener("click", backToTop);

      window.addEventListener("scroll", scrollFunction);
      
        
    

        
             
      // Get the button
      const mybutton = document.getElementById("btn-back-to-top");

      // When the user scrolls down 20px from the top of the document, show the button

      const scrollFunction = () => {
        if (
          document.body.scrollTop > 20 ||
          document.documentElement.scrollTop > 20
        ) {
          mybutton.classList.remove("hidden");
        } else {
          mybutton.classList.add("hidden");
        }
      };
      const backToTop = () => {
        window.scrollTo({ top: 0, behavior: "smooth" });
      };

      // When the user clicks on the button, scroll to the top of the document
      mybutton.addEventListener("click", backToTop);

      window.addEventListener("scroll", scrollFunction);