Smooth scroll jQuery script vs. scroll behavior CSS property

Adding a smooth scrolling animation when navigating between elements on a single page is a quite simple task. Apart from many plugins available, you can implement this function by adding a simple smooth scroll jQuery script to your website. There’s also a even simpler solution using only the scroll behavior CSS property. This tutorial will teach you how to use both options and help you decide which one is better for your project.

Difference between Smooth scroll jQuery script and scroll behavior CSS property

The scroll behavior CSS property is the simplest and quickest way to add animated scrolling effect to your website. Since this is a pure CSS solution it doesn’t affect website loading speed at all. Nowadays when loading speed becomes more and more important, this fact has to be considered. The scroll behavior CSS property doesn’t offer any possibility for customization of the scrolling animation. Smooth scroll works nicely by default, but you can’t adjust the scrolling speed, choose animation type, etc.

The downside of scroll behavior CSS property is that since it’s a relatively new property it’s not yet supported by all browsers. Speaking of major and most popular browsers, only Safari doesn’t support scroll behavior yet. Since Safari market share on desktop computers is around 10% and 25% on mobile phones (early 2020 data), it might be wise to use this technique nevertheless browser incompatibility while gaining on loading speed. We expect that in the near future all browsers will support the scroll behavior CSS property.

In the other hand, a Smooth scroll jQuery script will work in all browsers by default. Adding a Smooth scroll jQuery script to a website might need slightly more development experience, but it’s still a quite simple and quick task. Unlike the scroll behavior CSS property, this method offers some customization possibilities, such as scrolling speed adjustment, different animation types, target offset, etc.

The downside of using a Smooth scroll jQuery script is that it will generate 1-2 server requests to your website and slightly affect the loading speed. Even though, the script is very lightweight and those 1-2 requests shouldn’t concern you too much. In case you are optimizing your website for extremely fast loading speed where every millisecond counts, you should consider using the scroll behavior CSS property instead.

Smooth scrolling animation is a useful feature and visual enhancement on websites that use navigation from one position on a single page to another.

Enabling scrolling animation using the scroll behavior CSS property

It’s quite simple to enable the scrolling animation when navigating from one position to another on the same page. All you have to do is apply the scroll behavior CSS property to the whole HTML document. To do so, open your style sheet in the WordPress editor and add the following code to it:

html { scroll-behavior: smooth; } 

Don’t worry if the WordPress code validator returns a Unknown property error. Since the scroll behavior CSS property is quite new, many code validation systems still haven’t updated their databases. After saving the changes and reloading your website (clear browser cache), you should see the nice and smooth scrolling animation when clicking your on page links.

As we mentioned before, the Safari browser doesn’t support the scroll behavior CSS property yet, so you’ll still have the instant jump instead of the smooth scroll there. In the other hand, no need to worry about website loading speed, since this method doesn’t affect it at all.

A simple smooth scroll jQuery script

There are dozens of more or less similar jQuery scripts available on the web that will add smooth scrolling animation to your web pages. All those scripts rely on the same principle: when a link with the href attribute starting with a hashtag # is clicked, the jQuery animate function animates the screen repositioning to the new location. Our smooth scroll jQuery script works the same way, with a couple of additional customization possibilities.

To add the script to your website copy the code below into your website’s footer, right before the closing </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>
$("a[href^='#']").click(function(event) {
	event.preventDefault();
	
	var location = $(this.hash);
	var offset = 0;
            var speed = 800;

	 $("html,body").animate({
            scrollTop: location.offset().top - offset
        }, speed );
        return false
});
</script>

NOTE: If your website already loads the jQuery library for some other purpose, you don’t have to load it again (delete the first <script></script> line of code).

You can adjust the scrolling animation speed by editing the var speed variable, set to 800 milliseconds in this example. By editing the var offset variable, you can adjust the distance in pixels (positive or negative) from the target location where you want the scrolling animation to stop. This is a quite useful feature for websites that use fixed or sticky headers.

This smooth scroll jQuery script will generate one server request, which will not significantly affect your website loading speed. Unlike the scroll behavior CSS property method, this script is cross browser compatible and it will work in all browsers.

Smooth scroll jQuery script with custom animation types

Now we’ll extend the smooth scroll jQuery script from the previous example with the possibility to choose the scroll animation type. This way we can replace the default linear animation with more visually attractive animations. For example, such animations can have dynamic speed changes, elastic or bouncing effects, etc.

Same as in the previous example, copy the code below in your website’s footer, right before the closing </body> tag. If you already copied the code from the previous example, replace it with the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>


<script>
$("a[href^='#']").click(function(event) {
	event.preventDefault();
	
	var location = $(this.hash);
	var offset = 0;
            var speed = 2500;
	var easing = "easeOutBounce";

	 $("html,body").animate({
            scrollTop: location.offset().top - offset
        }, speed, easing );
        return false
});
</script>

This smooth scroll jQuery script is pretty much the same as the one from the previous example, with two differences. Firstly, together with the jQuery library we also load the easing library containing various animation types. If your website already uses this library, you don’t have to load it again. Secondly, we added the var easing variable to our script, used to define the scrolling animation type. In our example we’ve set the animation type to easeOutBounce, which will create a bouncing effect right before the scrolling stops at the desired location. You can find more animation types to use instead of easeOutBounce in the Easing Cheat Sheet.

Pro Tip: Some scrolling animations happen very fast and sometimes you won’t notice the specific easing effect. When using custom scroll animation types, set the animation speed a bit higher than you would with a default linear animation. Notice in our examples we’ve set the animation speed to 800 milliseconds for the linear animation and 2500 milliseconds for the bouncing animation.

Our smooth scroll jQuery script with custom animation types generates 2 server requests, which will affect your website loading speed slightly more than the script from the first example with no animation type selection.

Smooth scroll WordPress plugins

If you’re not comfortable with editing template files or this tutorial was too advanced for you, there are many smooth scroll WordPress plugins you can try out. To make your choice easier we tested and reviewed the most popular Smooth scroll plugins for WordPress. Read our review carefully to choose the right plugin for your specific project.