---
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-08-18
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)

## Frequently Asked Questions

**Q: Why isn't smooth scrolling working in my WordPress table of contents?**
A: Smooth scrolling depends on the Table Of Contents block from Nexter Blocks, so the first thing to check is whether that block is installed and activated. The tutorial also says the Smooth Scroll toggle has to be enabled in the Layout tab after you pick the type and style. If the click still jumps instead of animating, the Duration and Offset settings are the two controls that shape how the scroll behaves.

**Q: What do I need before adding smooth scrolling to a table of contents in WordPress?**
A: The key requirement is the Table Of Contents block from Nexter Blocks, and it has to be installed and activated first. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this as part of Nexter Blocks rather than a separate setup. That matters because the smooth scroll option is tied to that block, not to a generic WordPress table of contents.

**Q: Can I control how fast the table of contents scrolls?**
A: The Duration section controls scrolling speed, and it can be adjusted for responsive devices. That gives you more control than a simple on or off animation because a shorter duration feels snappier while a longer one feels slower and more deliberate. If the page feels too abrupt when jumping to headings, Duration is the setting that changes that behavior.

**Q: How do I stop a table of contents link from landing too high on the heading?**
A: The Offset section is what handles that problem. It lets you set a scroll offset value for responsive devices, which means the page scrolls an equal number of pixels below the heading instead of stopping right on top of it. That is useful when headings can get hidden by surrounding layout spacing or when you want a little breathing room after each jump.

**Q: Is smooth scrolling better for long blog posts with lots of headings?**
A: Smooth scrolling makes long posts feel easier to navigate because clicking a heading moves the reader through the page instead of snapping instantly. The tutorial frames it as both an aesthetic improvement and a more user-friendly navigation experience. For content-heavy pages, that matters because readers can keep their place mentally while moving between sections.

**Q: Where can I see the Table Of Contents block before adding it to my site?**
A: [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/) shows the Table Of Contents block itself, while [click here](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/) points to the full feature overview documentation. Those two links serve different purposes: one is for previewing the block, and the other is for understanding how it fits into adding a table of contents in WordPress.