How to Add Scroll Top Animation in Elementor Accordion?

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor's Accordion widget allows users to add scroll top animation.
  • Users can specify the offset distance for scrolling in the Offset field of the Accordion widget.
  • The Speed field in the Accordion widget enables users to set the scroll animation speed.
Table Of Content

Adding scroll top animation to the Elementor accordion, users can click on an accordion item and have it smoothly scroll to the top of the page, ensuring that the content is in full view. This feature is particularly useful for longer accordion items or when there are multiple accordion items on a page. 

You can easily add scroll top animation to your Elementor accordion using The Plus Addons for Elementor’s Accordion widget.

To check the complete feature overview documentation of The Plus Addons for Elementor Accordion widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the widget on the page, then go to the Extra Option tab and turn on the Scroll Top toggle. 

Tpae accordion scroll top 3 how to add scroll top animation in elementor accordion? From the plus addons for elementor

Then, in the Offset field, you can specify the amount of space from the top of the page until the active accordion item scrolls. 

In the Speed field, you can set scroll animation speed. 

Accordion scroll top demo

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the scroll top animation isn't working in my Elementor accordion?

If the scroll top animation isn't functioning, ensure that you have activated the Scroll Top toggle in the Extra Option tab of the Accordion widget. If it's still not working, check that The Plus Addons for Elementor is properly installed and activated, as this feature relies on the plugin. Sometimes, conflicts with other plugins can also cause issues, so consider disabling them temporarily to troubleshoot.

What is the best speed setting for scroll top animation in an Elementor accordion?

The best speed setting for scroll top animation depends on your site's design and user experience goals. A common practice is to set the speed between 300 to 500 milliseconds for a smooth transition. This range is fast enough to feel responsive but slow enough to allow users to perceive the scroll. Adjust the Speed field in the Accordion widget settings to find what feels right for your specific layout.

Does the scroll top animation work on mobile devices?

The scroll top animation in the Elementor accordion is designed to work on all devices, including mobile. However, it's important to test the functionality on various screen sizes to ensure the user experience remains smooth. Mobile users may have different scrolling behaviors, so verifying that the animation performs well on mobile is crucial for maintaining usability.

How do I add the scroll top animation to my Elementor accordion?

To add scroll top animation to your Elementor accordion, first, ensure you have The Plus Addons for Elementor installed. Then, add the Accordion widget to your page, navigate to the Extra Option tab, and turn on the Scroll Top toggle. You can also specify the offset and speed settings to customize the animation to fit your design needs.

Last reviewed: April 11, 2026

Related Docs