FlexyPe Checkout
– Beyond Foam
Skip to content
Your cart is empty
Looks like you havenβt made
your choice yet...
Continue shopping
Oops, This Page Is Missing
The page youβre looking for doesnβt exist or may have been moved. Letβs guide you back to something beautiful.
- Choosing a selection results in a full page refresh.
- Opens in a new window.
)
//
// Create button HTML
const backToTopHTML = `
`;
// Icon SVG paths
function getIconSVG(iconType) {
const icons = {
arrow: '',
chevron: '',
caret: ''
};
return icons[iconType] || icons.arrow;
}
// Insert button into page
document.body.insertAdjacentHTML('beforeend', backToTopHTML);
// Get settings from Shopify
const settings = {
enabled: true,
scrollThreshold: 300,
position: 'bottom-right',
bottomSpacing: 30,
sideSpacing: 30,
buttonStyle: 'square',
buttonSize: 40,
bgColor: '#333333',
iconColor: '#FFFFFF',
opacity: 90 / 100,
hoverBgColor: '#333333',
hoverOpacity: 100 / 100,
animationType: 'scale',
showShadow: true,
iconSize: 24,
smoothScroll: true,
scrollDuration: 600
};
// Get button element
const backToTopBtn = document.getElementById('back-to-top-btn');
if (settings.enabled && backToTopBtn) {
// Apply styles
applyStyles();
// Show/hide button on scroll
let scrollTimeout;
window.addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (window.pageYOffset > settings.scrollThreshold) {
showButton();
} else {
hideButton();
}
}, 100);
});
// Scroll to top on click
backToTopBtn.addEventListener('click', () => {
if (settings.smoothScroll) {
smoothScrollToTop();
} else {
window.scrollTo(0, 0);
}
});
// Apply all styles
function applyStyles() {
// Position
let positionStyles = {
bottom: settings.bottomSpacing + 'px'
};
if (settings.position === 'bottom-right') {
positionStyles.right = settings.sideSpacing + 'px';
} else if (settings.position === 'bottom-left') {
positionStyles.left = settings.sideSpacing + 'px';
} else if (settings.position === 'bottom-center') {
positionStyles.left = '50%';
positionStyles.transform = 'translateX(-50%)';
}
// Shape
let borderRadius = '0';
if (settings.buttonStyle === 'circle') {
borderRadius = '50%';
} else if (settings.buttonStyle === 'rounded') {
borderRadius = '12px';
}
// Apply styles
Object.assign(backToTopBtn.style, {
position: 'fixed',
zIndex: '99',
width: settings.buttonSize + 'px',
height: settings.buttonSize + 'px',
backgroundColor: settings.bgColor,
color: settings.iconColor,
border: 'none',
borderRadius: borderRadius,
cursor: 'pointer',
opacity: settings.opacity,
transition: 'all 0.3s ease',
boxShadow: settings.showShadow ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
...positionStyles
});
// Icon size
const icon = backToTopBtn.querySelector('.back-to-top-icon');
if (icon) {
icon.style.width = settings.iconSize + 'px';
icon.style.height = settings.iconSize + 'px';
}
// Hover effect
backToTopBtn.addEventListener('mouseenter', () => {
backToTopBtn.style.backgroundColor = settings.hoverBgColor;
backToTopBtn.style.opacity = settings.hoverOpacity;
backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'translateY(-5px)';
});
backToTopBtn.addEventListener('mouseleave', () => {
backToTopBtn.style.backgroundColor = settings.bgColor;
backToTopBtn.style.opacity = settings.opacity;
backToTopBtn.style.transform = settings.position === 'bottom-center' ? 'translateX(-50%)' : 'none';
});
}
// Show button with animation
function showButton() {
if (backToTopBtn.style.display === 'flex') return;
backToTopBtn.style.display = 'flex';
backToTopBtn.style.alignItems = 'center';
backToTopBtn.style.justifyContent = 'center';
if (settings.animationType === 'fade') {
backToTopBtn.style.opacity = '0';
setTimeout(() => {
backToTopBtn.style.opacity = settings.opacity;
}, 10);
} else if (settings.animationType === 'slide') {
backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'translateY(100px)';
setTimeout(() => {
backToTopBtn.style.transform = settings.position === 'bottom-center' ? 'translateX(-50%)' : 'none';
}, 10);
} else if (settings.animationType === 'scale') {
backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'scale(0)';
setTimeout(() => {
backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'scale(1)';
}, 10);
}
}
// Hide button with animation
function hideButton() {
if (backToTopBtn.style.display === 'none') return;
if (settings.animationType === 'fade') {
backToTopBtn.style.opacity = '0';
} else if (settings.animationType === 'slide') {
backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'translateY(100px)';
} else if (settings.animationType === 'scale') {
backToTopBtn.style.transform = (settings.position === 'bottom-center' ? 'translateX(-50%) ' : '') + 'scale(0)';
}
setTimeout(() => {
backToTopBtn.style.display = 'none';
}, 300);
}
// Smooth scroll to top
function smoothScrollToTop() {
const startPosition = window.pageYOffset;
const startTime = performance.now();
function animation(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / settings.scrollDuration, 1);
// Easing function
const easeInOutCubic = progress < 0.5
? 4 * progress * progress * progress
: 1 - Math.pow(-2 * progress + 2, 3) / 2;
window.scrollTo(0, startPosition * (1 - easeInOutCubic));
if (progress < 1) {
requestAnimationFrame(animation);
}
}
requestAnimationFrame(animation);
}
}
//