Hey, I wanted to show you how to achieve a smooth scroll. Maybe you see website where you scroll your mouse wheel and it automatically jumps to the next section of the website. This is pretty easy to do inside of Divi and you don’t have to use a full-width section. You can use a standard section and customize it as you would for any other site BUT the only difference is it will be full screen.

Simple setup:

Step 1: Add a standard section to your page

Step 2: Go to advanced -> Main Element -> Add CSS

Super simple and now your section is 100% in the view height of your page. Customize the section however else you would like.

Step 3: Create a custom CSS class for your section. In this example I will call this section “bounce” You can name it whatever you want just in the next section replace “bounce” with whatever your class name is. (Recommend naming class relevant to your site so you don’t have random classes from random tutorials peppered throughout your site. Not a good practice)

Step 4: Create a few other sections add the same css to the main element of those or duplicate your first one. Every section you want to scroll to needs to have the same class as the first one. So you can call the other section class “bounce” as well.

Step 5: Add jquery. So I typically put my code modules at the top of the page (organizational purposes and quick access) so I’m going to add a code module underneath my text I have on the first section and add this code:

You guys can check out everything for yourself at Luke Haas’ website. He is the one who created scrollify

I did adjust one line of code to make it work with Divi. There are probably other ways but a quick workaround was to change:

To the Divi workaround:

So you can just keep that in mind when you’re reading through the documentation (if you do) on his website.

If you have questions