---
title: "How to Add Smooth Scrolling Effect to WordPress Table of Contents?"
url: https://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://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 Table Of Contents block enables smooth scrolling when clicking a heading in a WordPress table of contents.
- Smooth Scroll toggle in the Layout tab turns on the effect after selecting the appropriate type and style.
- Duration and Offset sections control scrolling speed and set a responsive scroll offset value in pixels down from the heading.

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://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://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://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://nexterwp.com/wp-content/uploads/2024/12/table-of-content-smooth-scroll-demo.gif)