Skip to content

How to Add Smooth Scroll in WordPress?

Key Takeaways

  • Nexter Blocks ofrece el bloque gratuito Smooth Scroll, que añade un desplazamiento suave a cualquier página con un solo bloque y funciona en Nexter Blocks gratis y en Nexter Blocks Pro.
  • Smooth Scroll se activa en Nexter > Blocks y se añade una vez por página; para usarlo en todo el sitio, se coloca en una plantilla que cargue en cada página, como el encabezado.
  • Smooth Scroll carga la biblioteca Lenis para toda la página y suaviza también el desplazamiento con teclado, pero los enlaces normales a secciones siguen saltando y requieren Smooth Navigation con el bloque Scroll Navigation para un enlace de sección suave.
Table of Contents

Smooth scrolling replaces the step-by-step jump of a mouse wheel with a soft, eased glide, which makes long landing pages feel more polished.

The free Smooth Scroll block in Nexter Blocks adds this to any page with a single block.

Before You Start

  • Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
  • Block to enable: Smooth Scroll, switched on under Nexter > Blocks in your WordPress dashboard.
  • Where to add it: once on each page that should scroll smoothly. To use it across the site, add it to a template that loads on every page, such as your header.

Learn via Video Tutorial

Steps

  1. Go to Nexter > Blocks, search for Smooth Scroll and turn it on.
Nexter Blocks screen with the Smooth Scroll block turned on and outlined in the Blocks list
  1. Add the Smooth Scroll block anywhere on the page. It shows nothing on the page itself.
  1. In Scrolling Core, keep Simple selected and set Duration, Wheel Multiplier and Touch Multiplier.
The Scrolling Core panel with Duration, Normalize Wheel, Wheel Multiplier and Touch Multiplier
  1. Click Advanced in the same panel to pick an Easing or turn on Infinite.
The Advanced options of Scrolling Core with the Easing dropdown
  1. Save and scroll the live page. The editor does not show the effect.

Settings

SettingWhat it doesDefault
DurationHow long each scroll glide lasts. The value is divided by 5000, so 2500 is about 0.5 seconds and 5000 about 1 second2500
Normalize WheelMeant to even out wheel speed between mice (see Limitations)On
Wheel MultiplierDistance per mouse-wheel step. 1000 is the normal distance, 500 is half, 2000 is double500
Touch MultiplierDistance per swipe on touch screens2
Easing (Advanced)Linear, Ease Out Cubic, Ease In Out, Ease Out Quart or CustomEase Out Cubic
Custom (Advanced)Your own easing formula, using t—
Infinite (Advanced)Scrolling past the bottom starts again from the topOff
Smooth Navigation (Connections)Smooth, eased scrolling for links in the Scroll Navigation blockOff

The block’s Advanced tab only has the shared Position and Custom options.

How It Behaves

  • The block loads the Lenis smooth-scroll library for the whole page it is on.
  • With the defaults, one wheel step moves half the usual distance and glides to a stop in about half a second.
  • Keyboard scrolling is smoothed too. Ordinary links to sections on the page still jump; use Smooth Navigation with the Scroll Navigation block for smooth section links.
  • It works the same in the free plugin and with Nexter Blocks Pro.

Limitations

  • Normalize Wheel currently has no effect. Scrolling is the same with it on or off.
  • Smooth Navigation needs the Scroll Navigation block, which is part of Nexter Blocks Pro.
  • Only one Smooth Scroll block per page is used.

Troubleshooting

Scrolling feels too slow or too short

Raise Wheel Multiplier to 1000 for normal distance, or lower Duration for a shorter glide.

Nothing changes in the editor

That is expected. The effect runs on the published page.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!