Quick scroll up button on page

This is just one quick example of how to make scroll up button with Tailwind and Alpine JS

I created module for this, but it can actualy be just quick copy/paste. It needs just to files actualy.

• template file app/code/Pixel/HyvaSlideup/view/frontend/templates/slide-up.phtml
• xml file so it can be available on all pages app/code/Pixel/HyvaSlideup/view/frontend/layout/default.xml

Complete HTML and JS code:

<script>
  function slideUp() {
    return {
      scrollInit() {
        let button = document.getElementById("btn-back-to-top");

        window.onscroll = function () {
          if (
            document.body.scrollTop > 20 ||
            document.documentElement.scrollTop > 20
          ) {
            button.style.display = "block";
          } else {
            button.style.display = "none";
          }
        };
      },
      scrollUp() {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      },
    };
  }
</script>

<button
  x-data="slideUp()"
  x-init="scrollInit()"
  @click="scrollUp()"
  type="button"
  data-mdb-ripple="true"
  data-mdb-ripple-color="light"
  class="bottom-5 right-2 focus:outline-none focus:ring-0 transition bottom-5 right-5 fixed inline-block rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg active:bg-red-800 active:shadow-lg"
  id="btn-back-to-top"
>
  <svg
    aria-hidden="true"
    focusable="false"
    data-prefix="fas"
    class="h-4 w-4"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512"
  >
    <path
      fill="currentColor"
      d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"
    ></path>
  </svg>
</button>