---
title: "How to Add Scroll Top Animation in Elementor Accordion?"
url: https://theplusaddons.com/docs/scroll-top-animation-in-elementor-accordion/
date: 2023-04-28
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Do your accordion items hold long content? When one opens and the previous one closes, the page can jump and leave visitors mid-answer. Scroll Top brings the opened item to..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Scroll-Top-Animation-in-Elementor-Accordion_-1024x536.jpg
word_count: 239
---

# How to Add Scroll Top Animation in Elementor Accordion?

## 

- The Accordion widget from The Plus Addons for Elementor includes a Scroll Top option that brings the opened item to the top of the screen when long content causes page jumps.
- Scroll Top is part of The Plus Addons for Elementor Pro, and in the free plugin it shows an upgrade notice instead of working.
- Content > Extra Option controls Scroll Top with Offset in px and Speed in milliseconds, with default Speed set to 500 and Offset recommended to match a sticky header’s height.

Do your accordion items hold long content? When one opens and the previous one closes, the page can jump and leave visitors mid-answer. Scroll Top brings the opened item to the top of the screen.

The Accordion widget from The Plus Addons for Elementor has a **Scroll Top** option.

*To check the complete feature overview documentation of The Plus Addons for Elementor Accordion widget, [click here](https://theplusaddons.com/docs/elementor-accordion-widget-settings-overview/).*

***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](https://theplusaddons.com/elementor-widget/accordion/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Scroll Top is part of The Plus Addons for Elementor Pro. In the free plugin the option shows an upgrade notice instead of working.- **Widget to enable:** Accordion, switched on under **The Plus Addons > Widgets**.

## Steps

- Add the Accordion widget and your items.- In **Content > Extra Option**, turn on **Scroll Top**.- Set **Offset** — the space to leave above the item, in px. Use your sticky header’s height so the title isn’t hidden behind it.- Set **Speed** — how long the scroll takes, in milliseconds (default 500).

![Scroll Top with Offset and Speed in the Extra Option section](https://theplusaddons.com/wp-content/uploads/2026/09/accordion-scrolltop.webp)

![The page scrolling to the opened accordion item](https://theplusaddons.com/wp-content/uploads/2023/04/accordion-scroll-top-demo.gif)

## How It Behaves

- It runs each time an item opens, by click or by hover, shortly after the item starts opening.- It scrolls to the item, not to the top of the page.

## Troubleshooting

### The title ends up behind my sticky header

Raise the Offset to the header’s height.

## Related Docs

- [Accordion widget: settings overview](https://theplusaddons.com/docs/elementor-accordion-widget-settings-overview/)- [Stagger animation](https://theplusaddons.com/docs/accordion-with-stagger-animation-in-elementor/)

## Frequently Asked Questions

**Q: How do I keep an accordion item from hiding behind a sticky header when it scrolls into view?**
A: Raise the Offset to match the sticky header’s height. That leaves enough space above the opened item so its title lands below the header instead of disappearing behind it. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH this matters because Scroll Top brings the opened accordion item into view, not the top of the page, so the offset controls where that landing point ends up.

**Q: Does scroll top animation in Elementor accordion work on click and hover?**
A: The Scroll Top behavior runs each time an accordion item opens, whether that opening happens by click or by hover. It triggers shortly after the item starts opening, so the page movement follows the interaction instead of waiting until everything finishes. That timing matters when your accordion has long content, because it keeps readers near the newly opened answer instead of leaving them mid-page.

**Q: What is the best Offset value for scroll top animation in an accordion?**
A: The best Offset is usually the height of your sticky header in pixels. The setting exists to leave space above the opened item, so using your header’s height prevents the title from being covered. In practice, a larger header needs a larger offset. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH exposes this as a simple px value in Content > Extra Option.

**Q: Why does my accordion page jump when I open long content?**
A: That jump is exactly what Scroll Top is meant to smooth out. When one accordion item opens and the previous one closes, long content can leave visitors stranded mid-answer. Scroll Top brings the opened item back toward the top of the screen so the reading position stays anchored on the active content instead of drifting away during expansion.

**Q: Is scroll top animation in Elementor accordion available in the free version?**
A: Scroll Top is part of The Plus Addons for Elementor Pro. In the free plugin, that option shows an upgrade notice instead of working. The Accordion widget itself must also be switched on under The Plus Addons > Widgets. That split matters if you are troubleshooting missing behavior, because a visible option is not enough unless Pro is active.

**Q: What other Accordion widget settings are related to scroll top animation?**
A: The two settings tied directly to Scroll Top are Offset and Speed. Offset controls how much space stays above the opened item, while Speed controls how long the scroll takes in milliseconds, with 500 as the default. For a deeper widget overview, [Accordion widget: settings overview](https://theplusaddons.com/docs/elementor-accordion-widget-settings-overview/) covers the broader Accordion setup, and [Stagger animation](https://theplusaddons.com/docs/accordion-with-stagger-animation-in-elementor/) is a related option if you are comparing motion behaviors.