Elementor Accordion Scroll To Top Of Opened Accordion

Elementor Accordion Scroll To Top Of Opened Accordion

Just Released: 10 Popular Web Hosts Tested In Depth

Table of Contents

In this tutorial, I'm going to show you how you can greatly improve the UX of an accordion element in Elementor.

Specifically, you will learn how to stabilize the scroll position of the page so that it stays exactly where the clicked accordion item is.

I know the title says Scroll to Top of Elementor Accordion, however I have found this strategy to be even better UX. Let me show you.

By default, the change in height from another accordion that was previously opened above, and is now closing, is quite poor UX and makes it difficult for the user (on mobile in particular) to find the start of the accordion content he just opened.

Here is a demo of this, this is the default behaviour:


Here is what you will learn in this tutorial. This is the improved behaviour:

PS. If you are looking for an even more amazing accordion, that works on multiple row on desktop and tablet, then stacks on mobile, with dynamic data, check the Elementor Loop Grid Multi Row Accordion tutorial.

Let's get started!

First, add an HTML element on your page where you need the improved UX Elementor Accordion

If you have an accordion only on one or two page of your website, use the HTML element on those pages.

Elementor Accordion Scroll To Top Of Opened Accordion 1

If however you want this to work automatically for all accordions on your website, create a new Elementor Custom Code snippet, and add the code there.

Now, copy paste this code in your HTML element or code snippet

/* Please login to get the code 
 * The code will be for the Elementor Accordion Scroll To Top Of Opened Accordion tutorial 
 * Found at this URL https://element.how/elementor-accordion-scroll-to-top/ 

The code works for both the new and old Elementor accordion elements.

Finally, enjoy your new improved UX Elementor accordion

I hope you have found this tutorial helpful!


Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2701 Elements right here:

Checkout the Elementor Addon Finder directly

8 Responses

  1. Dear,

    I used your code to create the code snippet and after publishing it, I found out that it only works sometimes. When it works, it works! Thanks! But most of the times it ends up on the top of the page. Please help!

    1. Greetings Jan,

      Would you be able to share the URL where you are trying this with me? I will have a look.

      I tested on Chrome, Safari MacOS, Safari iOS, and it works as expected there (with the new accordion element).


  2. Thank you for your reply Maxime,

    I seem to have solved the issue by NOT activating the icon. If I click on the item, then everyting works like a charm. If I click on the icon to expand the item, it randomly goes wrong and closed down the probable cause. W

    1. Hey Jan!

      Thanks for sharing that precision (that the issue was on clicking the icon). I adjusted the code to make it work regardless of if the icon or title is clicked now!


  3. Thank you Maxime, appreciate your quick reply and fix! And glad to have been a help in pin-pointing to the error.

    Warm regards,


Leave a Reply