Smooth Scroll

In this article, we're going to show you how to use the Smooth Scroll extension.

  1. How to Enable the Extension
  2. Setting Up Smooth Scroll
  3. Summary

Smooth Scroll allows you to control the scrolling experience of your users with mouse wheels. Perfect if your site uses a lot of Parallax images to provide your users with a smoother scrolling experience.

How to Enable the Extension

Go to Pro > Validation or X > Validation for then look for Smooth Scroll. Click Install.

X > Validation

Once installed, the Install button will change and say Activate. Click that button and it will activate the plugin. You will then see the status change to Installed and Activated.

Smooth Scroll ActivateSmooth Scroll Activated

After installing and activating Smooth Scroll, you'll find it's settings under the X menu item if X is installed and activated, or the Pro menu item if Pro is installed and activated.

X TabPro Tab

From the main Smooth Scroll settings screen you can choose to disable or enable the plugin as needed:

Smooth Scroll Enable

Disabling the plugin will effectively turn off all output from the plugin (e.g. HTML, CSS, JavaScript etc). This is useful as a quick way to toggle activity if you ever need without having to go through the Plugins menu and worry about activating/deactivating it completely.

Selecting the enable checkbox will bring up the Settings meta box below. This is where you will adjust any options for the plugin and input your data as needed.

Smooth Scroll Settings

Setting Up Smooth Scroll

Smooth Scroll has two main options which are Step and Scroll Speed.

Step sets the speed at which the speed of the effect is applied when using a mouse wheel.

Scroll Speed sets the speed of the scrolling effect in general.

The easiest way to setup the plugin is to keep adjusting both values minimally and then visiting the front-end of your website to check how the effect is applied and gradually changing it to suit the setup you want. When you change the values you'll need to click on Update each time for your modifications to save and take effect.


There you have it. Now you know how to use the Smooth Scroll Extension to smoothen the experience of your users when scrolling using the mouse wheels.

See something inaccurate? Let us know