How to Add Smooth Scroll to WordPress

  • By Darrel Wilson
  • Last Updated: November 21, 2019

Have you ever wondered how on some websites you can scroll smoothly down the page? Moreover, have you ever wanted to have that effect on your site?

If you answered yes, you’re in the right place. In today’s post, I’ll explain why some websites have this effect and show you how you can enable it on your website without any coding.

On top of that, I’ll also show you two other plugins that add the smooth scroll effect only for certain parts of your website like anchor links and back to top buttons.

What is Smooth Scroll and Why Your Website Needs It

Smooth scroll refers to the feature that allows visitors to scroll smoothly. This feature was introduced by major applications like Google Chrome to combat the choppy feel of natural scrolling.

The smooth scroll feature can help the user experience on your site as the scrolling won’t suddenly stop when you stop scrolling. Instead, it will scroll a little further than your scrolling point to make the scrolling smoother.

Additionally, smooth scrolling is useful with keyboard shortcuts because with this feature enabled the page won’t abruptly jump to the next page when users press the Page Down button. Rather, it will scroll smoothly down to the next page so the users can still see the content they are scrolling past and how much they have scrolled down.

Smooth scrolling is especially useful if you have long pages on your website as the smooth scroll makes it easier to digest a lot of content at once.

Smooth scrolling is usually used if you have a theme that uses a parallax effect, when you use anchor links to jump to different sections on the page, and when you want to have a smooth scroll effect for your back to top button.

MouseWheel Smooth Scroll Plugin Features

The MouseWheel Smooth Scroll plugin is a free plugin that can be downloaded from the official plugin repository. The plugin has 4,5-star rating and more than 10,000 active installs.

The MouseWheel Smooth Scroll plugin allows you to easily add smooth scroll to your WordPress website in case your theme doesn’t support this feature out of the box.

It’s worth mentioning that you can use this plugin even if your theme comes with smooth scroll because the plugin gives you more control over the smooth scroll effects and duration.

With that said, the MouseWheel Smooth Scroll plugin doesn’t have too many features. You can control the scrolling core features such as framerate and how far down the page will scroll.

Other features include enabling keyboard and touchpad support as well as the overall acceleration.

MouseWheel Smooth Scroll Plugin Pros and Cons

When it comes to advantages of using MouseWheel Smooth Scroll plugin, the biggest benefit of using the plugin is that you can get the smooth scroll effect without any coding.

Another advantage is that the plugin is easy to use and configure.

When it comes to cons, the only con I’ve been able to find is that the Help section in the plugin’s settings doesn’t have any instructions or troubleshooting steps.

How to Add Smooth Scroll to WordPress With MouseWheel Smooth Scroll Plugin

Now that you know what MouseWheel Smooth Scroll plugin has to offer, let’s take a look at how to use it to add smooth scroll to WordPress.

To start go to your WordPress dashboard and navigate to Plugins > Add new. Search for smooth scroll and then install the MouseWheel Smooth Scroll plugin. When the plugin is done installing, activate it.

To set up the plugin, you will need to go to Settings > Smooth Scroll. On this page, you can configure how fast the animation is and how far down the page the smooth scroll will go. As you can see from the screenshot, I have mine set to 900 framerate, 700 animation time, and 300px step size (how many pixels it scrolls down at once).

There are other settings in there, such as enabling keyboard and touchpad support and changing the acceleration rate, so feel free to play with them and see how they affect the animation.

You will also find the help section where you can get in touch with the plugin’s author if you run into any problems or difficulties.

Once you have the settings configured to your liking, scroll down and click Save to save the changes. You can then refresh the page and see how the animation looks. You can always go back and adjust the settings until you have an effect that looks good to you.

How to Add Smooth Scroll for Anchor Links or Back to Top Button in WordPress

As I mentioned earlier, smooth scrolling effect is often used when you want to have anchor links on your page that allow users to scroll to a particular section on your page. While MouseWheel Smooth Scroll is used to have smooth scrolling for the entire page, it won’t allow you to set up a smooth scroll for anchor links.

However, if you want this effect, you can easily add it by using the jQuery Smooth Scroll plugin.

This plugin creates a smooth scroll for your anchor links and adds a scroll to top button in the lower-right corner of long pages. The scroll to top button appears after some scrolling and hides automatically when a visitor reaches the top of the page.

If, on the other hand, you want an easy way to add a smooth scroll effect and a back to top button, then the Smooth Scroll Up plugin is the solution for you.

The plugin allows you to choose from several back-to-top button variations such as image, icon, tab, pill, and more. You can also upload your own custom image and choose the position on the screen as well as selectively enable or disable it for certain posts and pages. Lastly, the Smooth Scroll Up Plugin allows you to control element animations and set distance from the top before showing the scroll up element.

Video Tutorial

If you’re more of a visual learner, I have a video tutorial that explains and demonstrates how smooth scrolling works. I also show you how to install and set up the plugin so you can follow along easily.

Final Thoughts

Adding smooth scroll to your WordPress website is easy and it helps your visitors have a better user experience. Use this tutorial to walk you through the process of downloading and setting up the MouseWheel Smooth Scroll plugin so you can add this functionality to your site for the entire page, to add it to your anchor links or to add a smooth scrolling back to top button.

Like This Article?

I have tons of great free content and giveaways! Join 10,000+ others and get access to coupons, freebies, and other great wordpress tips and tricksfor your wordpress website!

Leave a Reply

Hi, Sign Up For Freebies And Wordpress News!

Hi, Sign Up For Freebies And Wordpress News!

Join My Mailing List For Tips, News, And Discounts!

You have Successfully Subscribed!