---
title: "How to Add Smooth Scroll in WordPress?"
url: https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/
date: 2025-07-16
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add a smooth scroll effect to a WordPress website? Smooth scrolling makes your website look more polished and helps users have a better experience. It makes..."
image: https://nexterwp.com/wp-content/uploads/2025/07/Glassmorphism-featured-image-1-1024x538.jpg
word_count: 634
---

# How to Add Smooth Scroll in WordPress?

## Key Takeaways

- Nexter Blocks includes a Smooth Scroll block that adds a smooth scroll effect to WordPress websites.
- Users can enable infinite scrolling with the Smooth Scroll block, allowing the page to scroll back to the top after reaching the bottom.
- The Smooth Scroll block allows customization of scrolling speed through the Duration and Wheel Multiplier settings.
- Easing options in the Smooth Scroll block include Linear, Ease Out Cubic, Ease In Out, Ease Out Quart, and Custom for varied scrolling behavior.

Do you want to add a smooth scroll effect to a WordPress website? Smooth scrolling makes your website look more polished and helps users have a better experience. It makes the page glide smoothly as you scroll, which can make your website feel more modern and easier to navigate.

With the Smooth Scroll block from Nexter Blocks, you can easily add a smooth scroll effect to your WordPress website.

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

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks ](http://wordpress.org/plugins/the-plus-addons-for-block-editor/)plugin installed and activated.

- Make sure the Smooth Scroll block is activated. To verify this, visit Nexter → Blocks → and search for Smooth Scroll and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=BudfnONwoKM

## How to Activate the Smooth Scroll Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name** **and** **turn on the toggle.

![](https://nexterwp.com/wp-content/uploads/2025/07/smooth-scroll-activate-new-1024x361.png)

## Key Features

- **Scroll Navigation Connection** - You can easily [add a smooth scroll to the Scroll Navigation block](https://nexterwp.com/docs/add-smooth-scroll-to-the-scroll-navigation-block/).

- **Infinite scroll** - You can add an infinite scrolling effect from top to bottom.

- **Easing** - You can add different easing effects to the scrolling.

## How to Use the Button Block?

Add the Smooth Scroll block from Nexter Blocks to the page. It will add a smooth scroll effect to the page out of the box.

### Scrolling Core

In the **Simple** tab, you’ll find options to control the scrolling speed.

![](https://nexterwp.com/wp-content/uploads/2025/07/Nexter-Blocks-Smooth-Scroll-Scrolling-Core-Simple.png)

From the **Duration** section, you can set how long the scroll animation will take. The higher the value, the slower the scroll will be.

Then, from the **Normalize Wheel** toggle, you can manage the scrolling speed.

- **Wheel Multiplier** - This controls how fast the page scrolls when you scroll with your mouse wheel. The higher the number faster it will scroll, and the lower the number slower it will scroll with each scroll.

- **Touch Multiplier** - This controls how fast the page scrolls when you swipe on a touchscreen (like a phone, tablet, or touchscreen laptop). The higher the number faster it will scroll, and the lower the number slower it will scroll with each swipe.

Then, in the **Advanced** tab, you’ll find some additional options.

![](https://nexterwp.com/wp-content/uploads/2025/07/Nexter-Blocks-Smooth-Scroll-Scrolling-Core-Advanced.png)

From the **Easing** dropdown, you can select the easing for the scrolling. Based on your selected easing type, it will change the scrolling behavior, like whether the scroll starts slowly and gets faster, or starts fast and slows down.

- **Easing** – Controls how the scroll animation speeds up or slows down for a smooth feel.

- **Linear** – Scroll moves at a constant speed from start to end.

- **Ease Out Cubic** – Starts fast and slows down smoothly as it finishes.

- **Ease In Out** – Starts slow, speeds up in the middle, and slows down at the end.

- **Ease Out Quart** – More dramatic slowdown near the end of the scroll.

- **Custom** – You can [add custom easing to your scroll animation](https://nexterwp.com/docs/add-smooth-scroll-with-custom-easing-in-wordpress/).

Then, by enabling the **Infinite** toggle, you can turn the scrolling into infinite scrolling. If you scroll down to the end of the page, it will scroll back to the top and continue scrolling, and similarly, if you scroll up past the top, it jumps to the bottom.

### Connections

By enabling the **Smooth Navigation** toggle, you can add smooth scrolling to the Scroll Navigation block.

![](https://nexterwp.com/wp-content/uploads/2025/07/Nexter-Blocks-Smooth-Scroll-Connections-1.png)

For this to work, you have to use both the Smooth Scroll and Scroll Navigation block on the same page.

**Advanced** - From here, you can customize the block further. 

- **HTML anchor** - Here, you can add an anchor name to link directly to the block within the page.

- **Additional CSS class(es) **- Here, you can add a custom CSS class to fine-tune the style by using your own custom CSS.

Advanced options remain common for all our blocks; you can explore all their options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Smooth Scroll block isn't activating?**
A: If the Smooth Scroll block isn't activating, first ensure that the Nexter Blocks plugin is installed and activated. Then, navigate to Nexter u2192 Blocks, search for the Smooth Scroll block, and toggle it on. If it still doesn't activate, check if the default WordPress Block editor is active, as the Smooth Scroll block requires it.

**Q: What are the best settings for scrolling speed in the Smooth Scroll block?**
A: To achieve optimal scrolling speed, adjust the Duration setting in the Simple tab. A higher value will slow down the scroll animation, while the Wheel Multiplier and Touch Multiplier settings allow you to fine-tune the scroll speed for mouse and touch devices respectively. Experiment with these settings to find the balance that feels right for your users.