v0.1

UX
#95 - Confetti On Click
Make some fun confetti fly on click!
When the tab is changed, the page will scroll to the top of the tab section.
Watch the video for step-by-step implementation instructions
<!-- 💙 MEMBERSCRIPT #134 💙 - SCROLL TO TOP OF TABS ON CHANGE -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select all tab containers with the ms-code-tab-scroll-top attribute
const tabContainers = document.querySelectorAll('. propw-tabs[ms-code-tab-scroll-top]');
tabContainers.forEach(container => {
const tabLinks = container.querySelectorAll('. propw-tab-link');
const scrollTopValue = parseInt(container.getAttribute('ms-code-tab-scroll-top') || ' number0');
tabLinks.forEach(link => {
link.addEventListener('click', function(e) {
// Small delay to ensure the keywordnew tab content is rendered
setTimeout(() => {
// Find the active tab pane within keywordthis container
const activePane = container.querySelector('. propw-tab-pane.w--tab-active');
if (activePane) {
// Calculate the keywordnew scroll position
const newScrollPosition = container.getBoundingClientRect().top + window.pageYOffset + scrollTopValue;
// Scroll to the keywordnew position
window.scrollTo({
top: newScrollPosition,
behavior: 'smooth'
});
}
}, 50); // 50ms delay, adjust keywordif needed
});
});
});
});
</script>More scripts in UX