মোবাইলে এলিমেন্টর একোর্ডিয়ন স্ক্রল টু টপ

অনেক সময় মোবাইলে একোর্ডিয়ন কলাপ্স এবং ওপেন করলে বড় কোন একোর্ডিয়নের নিজে ছোট কোন একর্ডিয়ন থাকলে সেটাকে দেখা যায় না। কারন বড়টা কলাপ্স হয়ে যায় এবং ছোটটা উপরে চলে যায়। এই জন্য একোর্ডিয়ন কলাপ্স করলে তার অবস্থান অনুযায়ী সেটাকে স্ক্রল করার প্রয়োজন পড়ে। নিচের স্নিপেট ব্যবহার করতে পারেন।

আপনার যদি স্টিকি হেডার না থাকে তাহলে currentTopOffset থেকে যে ১২০ মাইনাস করেছি সেটা বাদ দিয়ে দিতে পারেন।

<script>
      document.addEventListener("DOMContentLoaded", function () {
          let accordionTitles = document.querySelectorAll('.elementor-accordion-item .elementor-tab-title');

          accordionTitles.forEach(title => {
              title.addEventListener('click', function () {
                  let initialTopOffset = title.getBoundingClientRect().top + window.scrollY;
                  let startTime;

                  function scrollAnimation(currentTime) {
                      if (!startTime) startTime = currentTime;

                      let elapsedTime = currentTime - startTime;
                      let duration = 600; // Adjust duration for smoother effect
                      let easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
                      let progress = Math.min(elapsedTime / duration, 1);

                      let currentTopOffset = title.getBoundingClientRect().top + window.scrollY;
                      let offset = ((currentTopOffset - 120) - initialTopOffset) * easeInOutQuad(progress);

                      window.scrollTo(0, initialTopOffset + offset);

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

                  requestAnimationFrame(scrollAnimation);
              });
          });
      });
</script>
2 Likes

thank you vaiya…vlo vabe bujhanor jonno

anWriter এ এমন প্রবলেম এখনো ফেস করি নাই…