--- 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-09-15 lang: en author: "Aditya Sharma" description: "Clicking a table of contents link normally teleports the reader, and they lose their bearings. Smooth scrolling animates the trip instead, so the reader sees how far they have moved..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Smooth-Scrolling-Effect-to-WordPress-Table-of-Contents_-1024x519.jpg word_count: 570 --- # How to Add Smooth Scrolling Effect to WordPress Table of Contents? ## Key Takeaways - Nexter Blocks Pro incluye el bloque Table of Contents, que se activa en Nexter > Blocks y construye la lista a partir de bloques H1-H6 reales, no de texto que solo parece un encabezado. - Smooth Scroll anima el salto al hacer clic en los enlaces del Table of Contents; Duration define cuánto dura el recorrido en milisegundos y 420 es el valor predeterminado recomendado como punto de partida. - Offset debe quedarse en 0 porque con Smooth Scroll activado aparece roto: con valores como 150 o 400 la página termina en el lugar equivocado, y con Smooth Scroll desactivado Offset no hace nada. Clicking a table of contents link normally teleports the reader, and they lose their bearings. Smooth scrolling animates the trip instead, so the reader sees how far they have moved and where they have landed. *For every Table of Contents setting in one place, see the [Table of Contents block guide](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/) ## Before You Start - **Edition:** **Pro** — the Table of Contents block is part of Nexter Blocks Pro.- **Block to enable:** Table of Contents, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Real headings on the page:** the list is built from your H1–H6 blocks, so text that only *looks* like a heading will not appear. ## Steps - Add the **Table of Contents** block to your post or page and click **Design from Scratch**. - In the **Layout** panel, pick a **List Type** — **UL** for bullets or **OL** for numbers — and a **Style**. ![The List Type setting with UL and OL](https://nexterwp.com/wp-content/uploads/2026/09/toc-list-type.webp) - In the **Layout** panel, switch **Smooth Scroll** on. ![The Smooth Scroll toggle with Duration and Offset](https://nexterwp.com/wp-content/uploads/2026/09/toc-smooth.webp) - Set **Duration** — how long the trip takes, in milliseconds. The default 420 is a good starting point. - Leave **Offset** at **0**. - Publish, then click a link and watch it travel. > ***Leave Offset at 0.** Any other value sends the page to the wrong place — see below.* ## How It Behaves - **The travel is real, not instant.** Measured 300 milliseconds after a click, a page with smooth scrolling on was part-way there and still moving; with it off the same click was already finished.- **Duration is the length of that journey.** A longer value is gentler but makes readers wait; much above a second starts to feel slow.- It applies to clicks on the table of contents links, not to the browser's own scrolling.- **Heading Content Offset**, further up the same panel, is unrelated — it decides how near the top of the screen a heading has to be before the list marks it as the section you are reading. ## Limitations - **Pro only.**- **Offset is broken.** With Smooth Scroll on and Offset set to 150, the page animated almost to the heading and then jumped back, leaving the heading nearly 500 pixels down the screen; Offset 400 ended in exactly the same wrong place, so the number is not being honoured. Clicking the first link with an offset set left the page at the top, having not moved at all. With Smooth Scroll off, Offset does nothing at all. **Leave it at 0.**- Readers who have asked their system to reduce motion will still see the animation.- A very long duration on a long page can feel like the click did not work.- **One per page.** With two Table of Contents blocks on the same page only the first one is filled in — the second stays empty. This was measured on the front end. ## Troubleshooting ### The page still jumps instantly **Smooth Scroll** is off, or **Duration** is very small. Switch it on and try 420. ### It lands in the wrong place **Offset** has a value in it. Set it back to **0** — with it clear, clicks land with the heading at the top of the screen. ### The wrong item is highlighted as I scroll That is **Heading Content Offset**, not this setting. Raise it so a heading counts as current sooner. ### Nothing happens when I click If the list itself is empty, the problem is the **Content Selector** rather than the scrolling — see [the block guide](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/). ## Related Docs - [Table of Contents block: all settings](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/)- [Sticky table of contents](https://nexterwp.com/docs/make-a-sticky-table-of-contents-in-wordpress/)- [Collapsible table of contents](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/) ## 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.