Elementor Accordion Scroll To Top Of Opened Accordion
First, add an HTML element on your page where you need the improved UX Elementor Accordion
If the accordion appears on just one or two pages of your website, use the HTML element on those specific pages.
To apply this functionality to all accordions across your website, create a new Elementor Custom Code snippet and insert the code there.
Now, copy paste this code in your HTML element or code snippet
<script>
/* Code from https://element.how/elementor-accordion-scroll-to-top/
* Copyright 2023 Element.How
* V1.2 2023/12/03
*/
document.addEventListener("DOMContentLoaded", function () {
let accordionTitles = document.querySelectorAll('.e-n-accordion-item-title, .elementor-widget-accordion .elementor-tab-title');
accordionTitles.forEach(title => {
title.addEventListener('click', function (event) {
let initialTopOffset = title.getBoundingClientRect().top;
let startTime;
function scrollAnimation(currentTime) {
if (!startTime) startTime = currentTime;
let elapsedTime = currentTime - startTime;
if (elapsedTime < 600) { /* 0.6s stabilization duration */
let currentTopOffset = title.getBoundingClientRect().top;
let offset = currentTopOffset - initialTopOffset;
window.scrollBy(0, offset);
requestAnimationFrame(scrollAnimation);
}
}
requestAnimationFrame(scrollAnimation);
});
});
});
</script>
The code is compatible with both the new and old Elementor accordion elements.