Smooth Scroll

Smooth Scroll

Smooth Scroll block enables you to add a smooth scroll animation effecting when scrolling your website. This makes your website look very interactive and innovative.

Pro tip
If you are not an expert with setting up animations, just use the default values which we have provided for Smooth Scroll block. As the name says, the effect should be smooth and not lag due to incorrect values and settings.

How to use the Smooth Scroll Block of The Plus Addons For Gutenberg

The Smooth Scroll is an advanced block and needs to be set up properly. Let’s understand how to use this block in the tutorial below. 

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Smooth Scroll into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Smooth Scroll after “/” sign, eg.“/Smooth Scroll”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Scrolling Core

Smooth Scroll (Scrolling Scroll)

Frame Rate

Set the Frame Rate here.

Animation Time

Set the Animation Time here.

Step Size

Set the Step Size here.

Pulse Ratio of “tail” to “acceleration”

Smooth Scroll (Pulse ratio of tail to acceleration)

Plus Algorithm

Slide to enable the Plus Algorithm here.

Pulse Scale

Set the Pulse Scale here.

Pulse Normalize

Set the Pulse Normalize here.


Smooth Scroll (Acceleration)

Acceleration Delta

Set the Acceleration Delta here.

Acceleration Max

Set Acceleration Max option here.

Keyboard Settings

Smooth Scroll (Keyboard Settings)

Keyboard Support

Enable the Keyboard Support here.

Arrow Scroll

Set the Arrow Scroll here.

Other Settings

Smooth Scroll (Other Settings)

Touchpad Support

Slide to enable the Touchpad Support.

Fixed Support

Slide to enable the Fixed Support.


Smooth Scroll (Responsive)

Tablet/Mobile Smooth Scroll

Slide to enable the Tablet/Mobile Smooth Scroll.

2. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

4. Error 404 (Dynamic CSS)

In this tutorial, we have explained when this option will be needed.

View The Server Error Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.