--- title: "How to Add Smooth Scroll in WordPress?" url: https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/ date: 2025-07-16 modified: 2026-05-30 author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2025/07/Glassmorphism-featured-image-1-1024x538.jpg word_count: 967 --- # How to Add Smooth Scroll in WordPress? ## Key Takeaways - Nexter Blocks Smooth Scroll applies smooth scrolling to an entire WordPress site without custom code, and it lets editors set Duration, Easing, and Infinite looping from one block in the WordPress Block editor. - Scroll Navigation Connection links the Smooth Scroll block with the Scroll Navigation block so anchor-based navigation between page sections uses smooth easing on single-page WordPress sites. - Infinite Scroll turns page scrolling into a continuous loop, wrapping from bottom to top and from top to bottom, and the post says blog archive pages use the Infinite Scroll for Blog Posts block for post listings. - Custom Easing offers five built-in easing types, including Linear, Ease Out Cubic, Ease In Out, Ease Out Quart, and Custom, so the scroll animation can accelerate and decelerate in different ways. 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](http://wordpress.org/plugins/the-plus-addons-for-block-editor/) is a Gutenberg block that applies smooth scrolling to your entire WordPress site without custom code. 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 [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. - The Smooth Scroll block requires [Nexter Blocks (Pro)](https://nexterwp.com/pricing/). 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: 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** – 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](https://nexterwp.com/docs/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](https://nexterwp.com/docs/add-infinite-scroll-to-blog-posts-in-wordpress/) 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](https://nexterwp.com/docs/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. ![](https://nexterwp.com/wp-content/uploads/2025/07/Nexter-Blocks-Smooth-Scroll-Scrolling-Core-Simple.png) 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. ![](https://nexterwp.com/wp-content/uploads/2025/07/Nexter-Blocks-Smooth-Scroll-Scrolling-Core-Advanced.png) 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](https://nexterwp.com/docs/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. ![](https://nexterwp.com/wp-content/uploads/2025/07/Nexter-Blocks-Smooth-Scroll-Connections-1.png) To layer a custom cursor on top of your smooth-scroll experience, the [Blend Cursor block](https://nexterwp.com/docs/add-a-blend-cursor-in-wordpress/) in Nexter Blocks adds a cursor that responds to scroll and hover events. The **Advanced** section contains block-level settings for anchor targeting and custom CSS. - **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 target the block with your own CSS rules. These Advanced settings are shared across all Nexter Blocks. [View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)