---
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-04-09
author: "Aditya Sharma"
description: "Do you want to smoothly scroll to the content when clicking on a heading of the Elementor table of contents? By implementing smooth scrolling, you can enhance the overall aesthetic..."
word_count: 215
---

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

## Key Takeaways

- The Plus Addons for Elementor includes a Table Of Content widget that enables smooth scrolling.
- Users can control scrolling speed for responsive devices through the Smooth Duration section.
- The Scroll Offset section allows users to set a specific pixel value for scrolling from the heading.

Do you want to smoothly scroll to the content when clicking on a heading of the Elementor table of contents? By implementing smooth scrolling, you can enhance the overall aesthetic of a page and create a more seamless navigation experience for your users.

With the Table Of Content widget from The Plus Addons for Elementor, you can easily add smooth scrolling to the table of contents in Elementor.

*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, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-table-of-contents/)

To do this, add the Table Of Content widget to the page and follow the steps.

1. Select the appropriate style and tags from the **Layout** tab.

2. Then enable the **Smooth Scroll** toggle from the **Extra Options** tab.

![](https://theplusaddons.com/wp-content/uploads/2025/01/table-of-content-smooth-scroll.png)

From the **Smooth Duration** section, you can control the scrolling speed for responsive devices.

Then from the **Scroll Offset** section, you can set a scroll offset value for responsive devices, i.e. it will scroll to an equal number of pixels down from the heading.

Now when you click on a heading of the table of contents you’ll have a smooth scrolling experience.

## Frequently Asked Questions

**Q: What do I need before starting to add smooth scrolling to the Elementor table of contents?**
A: You need to have The Plus Addons for Elementor installed and activated to use the Table Of Content widget and enable smooth scrolling.

**Q: How do I enable smooth scrolling for the table of contents in Elementor?**
A: To enable smooth scrolling, add the Table Of Content widget to your page and toggle the Smooth Scroll option from the Extra Options tab.

**Q: What happens after I enable smooth scrolling on the table of contents?**
A: After enabling smooth scrolling, clicking on a heading in the table of contents will provide a smooth scrolling experience to the corresponding section of the page.

**Q: Can I control the scrolling speed for responsive devices?**
A: Yes, you can control the scrolling speed for responsive devices from the Smooth Duration section after enabling smooth scrolling in the Table Of Content widget.

**Q: What is the purpose of the scroll offset value in the smooth scrolling settings?**
A: The scroll offset value allows you to set a specific number of pixels to scroll down from the heading, ensuring that the content is properly positioned on the screen.

**Q: Is there a complete feature overview for the Table Of Content widget?**
A: Yes, you can check the complete feature overview documentation of The Plus Addons for Elementor Table Of Content widget by [clicking here](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/).