How to add a smooth scrolling effect to your WordPress website

Have you ever visited a website and the scrolling effect caught your attention, so smooth and fast and defiantly adds value to the design/content, well the reason behind it is most of the web developers use smoothscroll.js (a javascript plugin) for their applications and websites, well what about WordPress?

With WordPress, you can defiantly add smoothscroll.js and make your website scroll beautifully throughout the site making your content much more pleasing to the user.

there are two ways to add smoothscroll.js either by adding a Javascript Snippet Code or by using a Completly FREE plugin that will let you do it with one click, in this article I will cover both of them.

1- MouseWheel Smooth Scroll FREE Plugin

Let’s start with the plugin since it’s easier and probably most users prefer to use plugins (I mean that’s why we all use WP),

Follow the following instructions:

A. Download & Install MouseWheel Smooth Scroll Plugin

B. Navigate to ‘Settings >> Mousewheel Smooth Scroll’ to activate/customize the scrolling effect. *you’ll find it very easy to work with.

– Step: Controls how many pixels the content travels on one scroll
– Speed: Controls the speed of the traveling (the higher the faster)

My preferred settings are Step>> 115  Speed >> 750 this always gives me great results, however, it’s up to you to decide what you want on your project.

 

2- Adding smmothscroll.js Javascript snippet to your website (Code)

add the following code to your theme/child function.php:

IF YOU’RE NOT FAMILIARE WITH THE FOLLOWING JUST USE THE PLUGIN

***********

<?php

add_action( ‘wp_head’, function () { ?>

http://jQuery.scrollSpeed.js

/* write your JavaScript code here */
// The syntax:- $fn.scrollspeed(step, speed, easing)
jQuery.scrollspeed(100,800);

<?php } );

***********

*where it says “jQuery.scrollspeed(100,800);” 100 being step and 800 represents speed!

 

FAQs Regarding Smoothscroll.js

– Mobile Compatibility

smoothscroll.js is 100% mobile compatible and effective

– Performance & Optimization

smoothscroll.js will not affect performance or load time neither negative or positive way.

 

Conclusion

The Smooth Scroll Effect is a very lightweight addon yet very powerful in terms of User Experience and Content, I would recommend that you at least try it!

About the author: Al Ani Ab
freelancer, front-end and i love WP

Get involved!

Get Connected!

Come and join our community. Expand your network and get to know new people!

Comments

@peepso_user_737(Surender Yadav) Great Plugin, Darrel also made a video on this.
8 months ago