v0.1

UX
#95 - Confeti al clic
¡Haz volar un divertido confeti al hacer clic!
Añade un botón que se desplazará a la parte superior de la página cuando se haga clic en él,
Watch the video for step-by-step implementation instructions
<!-- 💙 MEMBERSCRIPT #114 v0.1 💙 - SCROLL TO TOP BUTTON -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var scrollTopButton = document.querySelector('[ms-code-scroll-top="button"]');
if (scrollTopButton) {
// Set initial styles
scrollTopButton.style.opacity = ' number0';
scrollTopButton.style.visibility = 'hidden';
scrollTopButton.style.transition = 'opacity number0.3s, visibility 0.3s';
// Function to check scroll position and toggle button visibility
function toggleButtonVisibility() {
if (window.pageYOffset > 300) {
scrollTopButton.style.opacity = ' number1';
scrollTopButton.style.visibility = 'visible';
} else {
scrollTopButton.style.opacity = ' number0';
scrollTopButton.style.visibility = 'hidden';
}
}
// Initial check on page load
toggleButtonVisibility();
// Check on scroll
window.addEventListener('scroll', toggleButtonVisibility);
// Scroll to top when button is clicked
scrollTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
});
</script>More scripts in UX