How to Add a Smooth Scroll in WordPress (Step-By-Step)

Do you want to add a sleek, smooth scrolling effect to your website?

By the end of this guide, you will learn how to implement smooth scrolling like a pro, giving your website a polished touch.

Here are the contents of this guide:

• The essence of the smooth scroll effect
• Step-by-step plugin integration
• Manual coding techniques
• Premium themes with the effect

Ready to elevate your web design game? Let’s jump right in!

What is the smooth scroll effect?

Have you ever visited a website where the scrolling felt exceptionally smooth, almost like gliding through the content seamlessly?

That’s the smooth scroll effect in action. It’s a feature that can significantly enhance the way you interact with a website.

The smooth scroll effect is a web design technique that animates the scrolling process:

So instead of jumping abruptly from one section to another, the page scrolls in a fluid, continuous motion.

This is often compared to the difference between taking the stairs (standard scrolling) and riding an escalator (smooth scrolling).

In addition, when you click on a link or navigation menu designed with smooth scroll, the page will not snap to the target location.

Here’s an example:

It will travel smoothly, improving readability as you follow the motion to the new section.

This effect is not just about aesthetics — it’s about enhancing user experience by providing a more controlled and gentle navigation through the content.

What are its benefits and disadvantages?

Smooth scrolling comes with its set of benefits and disadvantages that can impact user experience and website performance.

Here’s a concise look at the pros and cons:

How to Add a Smooth Scroll Effect

Now that we’re on the same page about what the smooth scroll effect is, it’s time to get into how to actually implement this sleek functionality on your website.

To add smooth scroll, you typically have two routes to choose from:

1. Using a WordPress plugin
2. Diving into some code

There’s actually a third option — using premium themes that come with the smooth scroll effect out-of-the-box. I’ll get into this later.

1. Use the MouseWheel Smooth Scroll plugin

MouseWheel Smooth Scroll is a free plugin that introduces a smooth scrolling effect when navigating with a mouse wheel, touchpad, or keyboard arrows.

Using it is simple:

Step 1: Install the plugin

Search for the plugin’s name from the repository then install and activate it on your website.

Step 2: Go to the plugin’s settings

After the plugin has been activated, you can now change the settings since it won’t automatically apply the smooth scroll effect.

Go to settings > smooth scroll:

Step 3: Configure the plugin

The settings here are divided into five main groups:

1. Scrolling core
2. Pulse ratio
3. Acceleration
4. Keyboard settings
5. Other

All you have to do here is change the settings and hit the save button below the page.

The settings I messed with are only the ones in the scrolling core group since they’re the ones you primarily need to change.

Unfortunately, if you need more information on what the other settings do,  you must try them for yourself since there’s no documentation.

Once you’re done, you can check out your website and see if you like the new smooth-scrolling animation settings.

2. Other plugins you can use

Do you need more options?

Well, the truth is, there aren’t a lot of plugins made just for smooth scrolling. There are some out there that include this in their features.

However, here are some WordPress smooth scroll plugins you can use:

Surbma – Smooth Scroll Plugin

Surbma is a minimalist and straightforward plugin that applies a smooth scroll effect to every anchor link across your site.

It is designed to work out of the box without any need for configuration:

Anchor Smooth Scroll

Anchor Smooth Scroll focuses on enhancing the behavior of anchor links in WordPress, providing a smooth scrolling effect upon clicking anchor links.

It’s a simple solution for smoother navigation within a page or across pages:

⛔ Warning: As of the time of writing, the plugin hasn’t been tested with the last few WordPress versions. No negative feedback though, but try at your own discretion.

jQuery Smooth Scroll

Like the previous plugins, jQuery Smooth Scroll enhances the scroll movement of the mouse wheel on your WordPress site.

This provides a smoother scrolling experience, especially beneficial for sites with longer pages like blogs or e-commerce sites.

⛔ Warning: As of the time of writing, the plugin hasn’t been tested with the last few WordPress versions. No negative feedback though, but try at your own discretion.

3. Manual code integration

You don’t want to use plugins?

Well, you can also integrate a smooth scroll effect manually into your WordPress site with a few steps. Unfortunately, you may need a developer to check your work.

🔕 Disclaimer: I’m not a developer, although I’m familiar with the general steps on how to implement the smooth scroll effect. Contact a developer to check and confirm your work.

Here are the general steps:

Step 1: Create the JavaScript file

For this, you need to use Notepad to create the JavaScript file and name it something like smooth-scroll.js or something similar.

You will then have to enter the script.

Here’s a basic example of how to implement smooth scrolling for anchor links on a website:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

🔕 Disclaimer: The script above is a sample script only that could enable your site to scroll smoothly. Consult a developer if it doesn’t work.

Step 2: Add the JS file to your website

From there, you need to add the file to the /js/ directory on your WordPress website (if there’s none, you can create one).

You will need either your web hosting’s file manager app or a transfer protocol program like Filezilla to upload the file to your site server.

Step 3: Enqueue the JavaScript

You will then need to enqueing the script within your theme’s functions.php file to ensure it loads on your site.

For this, you would add a function that uses wp_enqueue_script() to include your JavaScript file like this:

function theme_name_enqueue_smooth_scroll_script() {
    wp_enqueue_script('theme-name-smooth-scroll', get_template_directory_uri() . '/js/smooth-scroll.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'theme_name_enqueue_smooth_scroll_script');

This function hooks into wp_enqueue_scripts, which is the proper way to add scripts and styles to your WordPress site.

The true parameter at the end of wp_enqueue_script specifies that the script should be added to the footer

This is often recommended for performance reasons and to ensure that the DOM is fully loaded before the script runs.

After that, test the smooth scroll across different browsers and devices to confirm it works seamlessly and keep an eye on your site’s performance.

🔕 Disclaimer: If nothing worked, check with a developer. The steps above are general and might not work on your website.

Premium Themes With Smooth Scroll Effect

Do you prefer to use a theme that already has the smooth scroll effect built in?

Fortunately, many premium WordPress themes come with this feature built-in, offering not only a stylish look but also a functional and seamless browsing experience.

👉 Related: Best Premium WordPress Themes: No Free Themes Here

Here are some of them:

1. Astra Theme

Astra is acclaimed for its lightweight and rapid performance, making it an exceptional choice for those aiming to enhance SEO and user experience.

It’s a versatile theme that’s highly customizable and fits various types of websites, from portfolios to WooCommerce stores and personal blogs.

👉 Related: Astra Theme Review: Popular Choice or Just Overhyped?

2. Blocksy Theme

Blocksy is a Gutenberg-friendly WordPress theme, designed to be easily customizable using the Block Editor.

It’s a versatile theme suitable for any website type, from agencies to shops, offering a combination of innovative design and lightning-fast performance.

👉 Related: Blocksy Theme Review

3. Betheme

Betheme is one of the most popular multi-purpose themes on ThemeForest, renowned for offering over 700 ready-made websites.

Developed by the Muffin Group, it’s suitable for a wide array of industries and continually updated with new features.

👉 Related: Betheme Review: Pre-built Heaven or 1-License Hell?

4. Ohio Theme

Ohio is a creative WordPress theme designed for building modern and functional websites like blogs, online shops, or portfolios.

It is integrated with top tools like WPBakery and Slider Revolution and is WooCommerce-powered for e-commerce functionalities.

Adding the Smooth Scroll Effect

Whether you’re drawn to the seamless interaction of smooth scrolling for aesthetic or functional reasons, integrating this feature can significantly boost your website’s user experience.

Options abound, from plugins that make installation a breeze to manual code tweaks that offer custom solutions.

If you prefer a more straightforward approach, premium WordPress themes like Astra, Blocksy, BeTheme, and Ohio deliver this functionality out of the box, along with other powerful features.

Whichever path you choose, enhancing your site with smooth scrolling is a step towards a more polished and engaging web presence.