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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
- 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.
- 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.
