Do you want to add a smooth scroll effect to a WordPress website? Smooth scrolling replaces the default jump-scroll behavior with a fluid, animated page movement that makes navigation feel more natural for visitors. Unlike using the CSS scroll-behavior: smooth property, the Smooth Scroll block gives you full control over speed, easing, and infinite looping from a single block in the WordPress Block editor.
The Smooth Scroll block in Nexter Blocks is a Gutenberg block that applies smooth scrolling to your entire WordPress site without custom code. You set the scroll duration, choose an easing style, and the block handles the rest.
Best Used For:
- Single-page portfolio or agency sites where visitors navigate between sections using a fixed menu
- Landing pages where a refined, consistent scroll experience is part of the design
- Blog and content sites where infinite scrolling removes the hard stop at the bottom of a page
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- The Smooth Scroll block requires Nexter Blocks (Pro). Make sure Nexter Blocks (Pro) is installed and activated.
- Make sure the Smooth Scroll block is activated. To verify this, visit Nexter → Blocks, search for Smooth Scroll, and activate.
Learn via Video Tutorial:
How to Activate the Smooth Scroll Block?
Go to
- Nexter → Blocks
- Search the block name and turn on the toggle.
Key Features
- Scroll Navigation Connection – Connect the Smooth Scroll block with the Scroll Navigation block to apply smooth easing to anchor-based navigation between page sections. This is useful when you are building a single-page WordPress site where visitors jump between sections from a fixed menu. See How to Add Smooth Scroll to the Scroll Navigation Block for the full setup steps.
- Infinite Scroll – Turns page scrolling into a continuous loop. When a visitor reaches the bottom of the page, the scroll wraps back to the top. Use this on single-page or immersive sites where there is no footer or pagination to signal the end of content. For blog archive pages, the Infinite Scroll for Blog Posts block adds the same effect specifically for post listings.
- Custom Easing – Choose from five built-in easing types or define your own curve to control how the scroll animation accelerates and decelerates. See How to Add Smooth Scroll with Custom Easing in WordPress to configure a custom curve.
How to Use the Smooth Scroll Block?
Add the Smooth Scroll block from Nexter Blocks to the page. It applies smooth scrolling to the entire page automatically.
Scrolling Core
In the Simple tab, you will find options to control scroll speed.
From the Duration field, set how long the scroll animation takes to complete in milliseconds. A higher value makes the scroll slower. Use a lower value (around 800–1000) for fast, snappy navigation and a higher value (1200 or more) for a slower, more deliberate scroll on presentation or portfolio pages.
Enable the Normalize Wheel toggle to standardize scroll speed across different mouse hardware. Use this when your audience uses a mix of devices, since some mouse wheels apply different scroll distances per notch by default.
- Wheel Multiplier – Controls how much distance the page scrolls per notch of the mouse wheel. A higher number scrolls more distance per action; a lower number scrolls less. Reduce this when visitors on high-sensitivity mice scroll past page sections too quickly.
- Touch Multiplier – Controls how much distance the page scrolls per swipe on a touchscreen device. A higher number scrolls more distance per swipe; a lower number scrolls less. Lower this on mobile-first sites where overshooting a section on a phone is a common issue.
In the Advanced tab, you will find easing and looping options.
From the Easing dropdown, select how the scroll animation accelerates and decelerates throughout the scroll. The options are:
- Easing – Controls how the scroll animation speeds up or slows down.
- Linear – Scroll moves at a constant speed from start to end. Use this for a mechanical, minimal feel.
- Ease Out Cubic – Starts fast and slows down smoothly near the end. This is the most natural-feeling option for general-purpose sites.
- Ease In Out – Starts slow, speeds up in the middle, and slows down at the end. Use this when you want a gradual, intentional feel throughout the scroll.
- Ease Out Quart – A sharper deceleration near the end than Ease Out Cubic. Use this when you want a quick-start scroll that lands cleanly at the destination section.
- Custom – Define your own easing curve. See How to Add Smooth Scroll with Custom Easing in WordPress for setup steps.
Enable the Infinite toggle to turn scrolling into a continuous loop. Scrolling down past the bottom of the page wraps back to the top; scrolling up past the top jumps to the bottom. Use this on fully immersive single-page experiences where the page has no footer or end-of-content signal.
Connections
Enable the Smooth Navigation toggle to apply smooth scrolling to the Scroll Navigation block. Both the Smooth Scroll block and the Scroll Navigation block must be on the same page for this to work.
If you want to add an interactive cursor effect on top of your smooth-scroll experience, the Blend Cursor block in Nexter Blocks lets you layer a custom cursor on the page that responds to scroll and hover events.
Advanced – From here, you can customize the block further.
- HTML anchor – Add an anchor name to link directly to this block within the page. This is useful when another element on the page needs to scroll directly to the Smooth Scroll block’s position.
- Additional CSS class(es) – Add a custom CSS class to extend the block’s styling with your own CSS.
Advanced options are shared across all Nexter Blocks. You can explore all their options from here.
