---
title: "How to Add Smooth Scrolling Effect to Elementor Table of Contents?"
url: https://theplusaddons.com/docs/add-smooth-scrolling-effect-to-elementor-table-of-contents/
date: 2025-01-11
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Do you want the page to glide to a section when someone clicks the table of contents, instead of snapping to it? A short animation makes it obvious that the..."
word_count: 786
---

# How to Add Smooth Scrolling Effect to Elementor Table of Contents?

## 

- Table Of Content widget usa Smooth Scroll en Extra Options y muestra dos ajustes: Smooth Duration y Scroll Offset, con valores por dispositivo para escritorio, tablet y móvil.
- The Plus Addons for Elementor Pro requiere que Table Of Content esté activado bajo The Plus Addons > Widgets; sin el plugin Pro, el widget no aparece en el editor ni en páginas que ya lo usan.
- Smooth Duration empieza en 420 milisegundos y va de 1 a 1000, mientras Scroll Offset va de 0 a 500 píxeles para dejar espacio sobre el encabezado, por ejemplo para un sticky header.
- Clicking an entry anima la página hacia el encabezado y coloca su anchor en la barra de direcciones, pero Scroll Offset y Heading Active Offset comparten valor cuando Smooth Scroll está on y Scroll Offset es mayor que 0.

Do you want the page to glide to a section when someone clicks the table of contents, instead of snapping to it? A short animation makes it obvious that the page moved and how far, which is easier to follow than an instant jump.

The **Table Of Content** widget handles this in its **Extra Options** section, with **Smooth Scroll** and the two settings it reveals: how long the movement takes and how much room to leave above the heading.

*To check the complete feature overview documentation of The Plus Addons for Elementor Table Of Content widget, [click here](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/).*

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/table-of-contents/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Table Of Content is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Table Of Content, switched on under **The Plus Addons > Widgets**.- **The page needs real headings:** the widget does not create headings, it indexes the ones already on the page. Build the article with heading widgets (H2, H3, H4) before you judge the result.

## Steps

- Add the **Table Of Content** widget and set up **Layout** and **Select Tags** as usual.- Open **Extra Options** and switch **Smooth Scroll** on.

![Extra Options section with the Smooth Scroll switch turned on and outlined in the panel](https://theplusaddons.com/wp-content/uploads/2026/09/toc-smooth-scroll.webp)

- Set **Smooth Duration** to how long the movement should take. It starts at 420, and the number is milliseconds — so 800 is roughly twice as slow as the default. The slider stops at 1000.- Set **Scroll Offset** if you want the page to stop a little short of the heading, for example to clear a sticky header. Both sliders have their own value for desktop, tablet and mobile.

![Smooth Duration set to 800 and Scroll Offset set to 120, both outlined in the Extra Options section](https://theplusaddons.com/wp-content/uploads/2026/09/toc-smooth-values.webp)

- Update the page, then click an entry on the published page to see the movement.

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Smooth Scroll | Reveals the two settings below | Hide |
| Smooth Duration | How long the movement takes, in milliseconds. Range 1 to 1000, per device. | 420 |
| Scroll Offset | How much room to leave between the top of the screen and the heading. Range 0 to 500 pixels, per device. | 0 |

> *The unit next to Smooth Duration reads "px". It is a length of time, not a distance — 420 means 420 milliseconds.*

## How It Behaves

- Clicking an entry animates the page towards that heading and puts the heading's anchor in the address bar, so the visitor can copy or bookmark the link.- **Smooth Duration** genuinely changes the speed. On the same page and the same link, the default 420 settled in about 1.4 seconds, and a much longer value stretched the same movement to about 3 seconds.- **Scroll Offset** and **Heading Active Offset** share one value. While **Smooth Scroll** is on and **Scroll Offset** is above 0, the widget uses **Scroll Offset** for both, and whatever you set in **Heading Active Offset** is ignored.

## Limitations

- **Turning Smooth Scroll off does not turn the animation off.** The jump is animated whether the switch is on or off; in our test the switch made no difference to how the page moved. What the switch really controls is whether you can change the duration and the offset — with it off you get the defaults, 420 ms and no offset.- **Scroll Offset is not applied consistently.** With a 200 px offset the first heading on our test page landed exactly 200 px below the top of the screen, but headings further down the page all settled around 430 px down — the same place they landed with no offset at all. Check the result on your own page before relying on the value.- There is no option for an instant jump, and no option to leave the address bar alone.

## Troubleshooting

### The page still jumps instantly

Something else on the site is handling the click before the widget does — a theme option, another plugin, or a site-wide anchor script. Switch those off one at a time and test the page again after each change.

### The heading ends up under my sticky header

Raise **Scroll Offset** until the heading clears the header, and check it on several sections of the page, not just the first one.

### The highlight in the list changes too early or too late

That is **Heading Active Offset**. Note that it is ignored while **Smooth Scroll** is on with a **Scroll Offset** above 0 — in that case set the value on **Scroll Offset** instead.

## Related Docs

- [How to Add a Table of Contents in Elementor?](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/)- [How to Copy a Title URL from the Elementor Table of Contents?](https://theplusaddons.com/docs/copy-a-title-url-from-the-elementor-table-of-contents/)- [How to Make a Sticky Table of Contents in Elementor?](https://theplusaddons.com/docs/make-a-sticky-table-of-contents-in-elementor/)- [How to Scroll to a Page Section on Button Click in Elementor?](https://theplusaddons.com/docs/scroll-to-page-section-button-click/)