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

Key Takeaways

  • Nexter Blocks includes a Table Of Contents block that enables smooth scrolling in WordPress.
  • Users can control scrolling speed for responsive devices through the Duration section in the Table Of Contents block.
  • The Offset section allows users to set a scroll offset value for responsive devices when using the Table Of Contents block.
Table of Contents

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.

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

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.

tableofcontent smooth scroll

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.

table of content smooth scroll demo

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What if the smooth scrolling effect isn't working on my table of contents?

If smooth scrolling isn't functioning, ensure that the Smooth Scroll toggle is enabled in the Layout tab of the Table Of Contents block. This setting is crucial for activating the effect. Additionally, check that you have the Nexter Blocks installed and activated, as this block is part of that package. If the toggle is active and it still doesn't work, consider clearing your browser cache or testing in a different browser.

What is the best way to set the scroll offset for my table of contents?

Setting the scroll offset correctly is important for ensuring that headings are not obscured by fixed headers or other elements. In the Offset section, you can specify a pixel value that adjusts how far down the page the scroll will stop. A common practice is to test various values to find the one that works best for your layout, ensuring that content is fully visible after scrolling.

Does enabling smooth scrolling impact page load performance?

Enabling smooth scrolling generally has a minimal impact on page load performance, especially since NexterWP products, including Nexter Blocks, are designed to be lightweight. They use pure Vanilla JS and load only one CSS and one JS file per page, which helps maintain fast loading times. However, excessive use of animations or effects can accumulate, so it's wise to monitor performance if you have multiple animated elements.

Last reviewed: April 14, 2026

Related Docs