স্কিপ করে মূল কন্টেন্ট এ যান

কীভাবে 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>