---
title: "How to Add Smooth Scrolling Effect to WordPress Table of Contents?"
url: https://qa.nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/
date: 2024-12-03
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to enable smooth scrolling when clicking on a heading in the WordPress table of contents? Smooth scrolling enhances the page's aesthetics and provides a more seamless, user-friendly..."
image: https://qa.nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Smooth-Scrolling-Effect-to-WordPress-Table-of-Contents_-1024x519.jpg
word_count: 191
---

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

## Key Takeaways

- Nexter Blocks provides a Table Of Contents block that enables smooth scrolling in WordPress.
- Users can control scrolling speed and set scroll offset values for responsive devices in the Layout tab.
- The Smooth Scroll toggle must be enabled after selecting the appropriate type and style of the Table Of Contents widget.

Do you want to enable smooth scrolling when clicking on a heading in the WordPress table of contents? Smooth scrolling enhances the page's aesthetics and provides a more seamless, user-friendly navigation experience for visitors.

With the Table Of Contents block from Nexter Blocks, you can easily add smooth scrolling to the table of contents in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Table Of Contents block,* [click here](https://qa.nexterwp.com/docs/add-a-table-of-contents-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/)

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

1. After selecting the appropriate type and style, enable the **Smooth Scroll** toggle in the **Layout** tab.

![](https://qa.nexterwp.com/wp-content/uploads/2024/12/tableofcontent-smooth-scroll.png)

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

Then from the **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.

![](https://qa.nexterwp.com/wp-content/uploads/2024/12/table-of-content-smooth-scroll-demo.gif)