---
title: "How to Add Smooth Scroll to the Scroll Navigation Block?"
url: https://nexterwp.com/docs/add-smooth-scroll-to-the-scroll-navigation-block/
date: 2025-07-21
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "On a one-page site, the Scroll Navigation dots or links take visitors to each section. Smooth Navigation makes those jumps use the same feel as the rest of your page..."
word_count: 290
---

# How to Add Smooth Scroll to the Scroll Navigation Block?

## Key Takeaways

- Smooth Scroll block connects the free Smooth Scroll block with the Scroll Navigation block in Nexter Blocks Pro, and Smooth Navigation is turned on under Connections.
- Scroll Navigation items on a one-page site follow Smooth Scroll Duration and Easing when Smooth Navigation is on, while ordinary links to page sections stay unchanged.
- Both blocks are on the same page, and the setup needs Smooth Scroll enabled under Nexter > Blocks in the WordPress dashboard plus a one-page layout with section IDs.

On a one-page site, the Scroll Navigation dots or links take visitors to each section. Smooth Navigation makes those jumps use the same feel as the rest of your page scrolling.

It connects the free Smooth Scroll block with the Scroll Navigation block in Nexter Blocks Pro.

*For every Smooth Scroll setting in one place, see the [Smooth Scroll block guide](https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-smooth-scroll/)

## Before You Start

- **Edition:** Smooth Scroll is Free; the **Scroll Navigation** block needs **Nexter Blocks Pro**.- **Block to enable:** Smooth Scroll, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A one-page layout:** sections with IDs and a Scroll Navigation block pointing at them. See [how to create one-page scroll navigation](https://nexterwp.com/docs/create-one-page-scroll-navigation-in-wordpress/).

## Steps

- Build your sections and add the **Scroll Navigation** block with one item per section.

- Add the **Smooth Scroll** block to the same page.

- In the Smooth Scroll block, open **Connections** and turn on **Smooth Navigation**.

![The Connections panel of Smooth Scroll with Smooth Navigation turned on](https://nexterwp.com/wp-content/uploads/2026/09/smooth-scroll-connections.webp)

- Open **Scrolling Core**, click **Advanced** and choose an **Easing**. Adjust **Duration** under Simple if needed. Save.

## How It Behaves

- Scroll Navigation already moves to a section with its own animation.- With Smooth Navigation on, that movement is handled by Smooth Scroll instead, so it follows your Duration and Easing.- With it off, the navigation keeps its own animation, while mouse-wheel scrolling still uses Smooth Scroll.- Ordinary links to page sections, outside the Scroll Navigation block, are not changed.

## Limitations

- Both blocks must be on the same page.- Smooth Navigation only affects the Scroll Navigation block, which requires Nexter Blocks Pro.

## Troubleshooting

### Clicking a navigation item looks the same as before

Check that **Smooth Navigation** is on and try a different Easing, such as Linear, to see the change clearly.

## Related Docs

- [Smooth Scroll block: all settings](https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/)- [Create one-page scroll navigation](https://nexterwp.com/docs/create-one-page-scroll-navigation-in-wordpress/)- [Add smooth scroll with custom easing](https://nexterwp.com/docs/add-smooth-scroll-with-custom-easing-in-wordpress/)