Back to Top Button

<template>
  <button
    id="back-to-top-btn"
    class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800"
    onclick="scrollToTop()"
    aria-label="Back to top"
  >
    <svg
      class="w-6 h-6"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 6V4m0 2l-3 3m3-3l3 3m-6 6h6a2 2 0 010 4H6a2 2 0 010-4z"
      ></path>
    </svg>
  </button>
</template>

<script>
  // This script is for demonstration purposes and would typically be in a separate JS file
  const backToTopButton = document.getElementById('back-to-top-btn');

  window.onscroll = function() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }
  };

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
</script>

<style>
  /* Add any necessary component-specific styles here */
  #back-to-top-btn {
    display: none; /* Hidden by default */
  }
</style>