কীভাবে Scroll Up button অ্যাড করবেন

কীভাবে Scroll Up button অ্যাড করবেন

১.ই-দোকান এর ম্যানেজ প্যানেল থেকে Shop > Design ক্লিক করুন

২.Footer অপশন এ ক্লিক করুন

৩.রাইট সাইড এর টেক্সট এ ক্লিক করুন

৪.আপনার কোড টি পেস্ট করুন সেভ করুন

###Code

<div id="scroll-up-icon" style="position:fixed; bottom:50px; right:-50px; z-index:10000; transition: right 0.5s;">
  <style>
    .scroll-up {
      position: relative;
      z-index: 1;
      display: inline-block;
    }
    .scroll-up::after {
      display: block;
      content: "";
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
      background-color: #fff;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    .scroll-up i {
      color: gray;
    }
  </style>
  <a class="scroll-up" href="#" onclick="scrollToTop()" style="font-size:25px; color: #000;">
    <i class="fa-solid fa-angle-up"></i>
  </a>
</div>

<script>
  // Detect scroll event
  window.onscroll = function() {
    var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollUpIcon = document.getElementById('scroll-up-icon');

    if (scrollPosition > 100) {
      scrollUpIcon.style.right = '50px'; // Show icon by sliding from the right
    } else {
      scrollUpIcon.style.right = '-50px'; // Hide icon by sliding to the right
    }
  };

  // Smooth scroll to top with custom duration of 1 second
  function scrollToTop() {
    const startPosition = window.scrollY;
    const duration = 1000; // 1 second
    const startTime = performance.now();

    function animateScroll(currentTime) {
      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / duration, 1); // Progress goes from 0 to 1

      // Ease function for smooth scrolling effect
      const ease = progress * (2 - progress); // EaseInOut function for smooth effect

      window.scrollTo(0, startPosition * (1 - ease));

      if (progress < 1) {
        requestAnimationFrame(animateScroll);
      }
    }

    requestAnimationFrame(animateScroll);
  }
</script>