Divi Scroll to the next section
This quick tutorial will show you how to set up a scroll-to-section effect using the Divi dot navigation and some Javascript code. If you are looking for a way to use anchor links to jump to sections on a Divi page, check out our Divi anchor links guide here.
SCROLL YOUR MOUSE!
STEP 1 – Use the Divi builder to create your page
Seeing that the mouse wheel will now scroll to the next section, make sure that the content on each of your page builder sections is not too long! This effect works better as a website page rather than a post but I have activated in this post to show you how it works. This only works with mouse wheel on desktop as activating on tablet or mobile leaves a lot of room for very bad usability when section content goes beyond viewport.
STEP 2 – Turn on the Divi Dot Navigation
This will be in the setting in the top right of your page or post and the effect won’t work unless it is turned on.
STEP 3 – Add the following code into a code module somewhere on your page/post.
<script> ( function( $ ) { $( document ).on( 'mousewheel DOMMouseScroll', function( event ) { if ( ( $( '.et_pb_side_nav' ).length === 0 ) || $( 'html, body' ).is( ':animated' ) ) return; event.preventDefault(); var direction = event.originalEvent.wheelDelta || -event.originalEvent.detail; var $position = $( '.et_pb_side_nav' ).find( '.active' ); var $target; if( direction < 0 ) { $target = $( $position ).parent().next(); } else { $target = $( $position ).parent().prev(); } if ( $( $target.length ) !== 0 ) { $( $target ).children( 'a' ).trigger( "click" ); } } ); } )( jQuery ); </script>
STEP 4 – Useful CSS additions
A couple of (optional) CSS additions I have found work well with this effect, particularly when building pages, are to make the section full page and to vertically align any content within the sections. Scroll down for an example and the CSS code you need to add.
Make the section full page and vertically align content
Add a class to the section/s you want to be full screen of fullpage-valign. Then add this into the code module where you added the JavaScript in step 3. You can also add this into the pages custom css, Divi Theme options custom CSS or a child theme depending on what floats your Divi boat.
<style> .fullpage-valign{height:100vh; display: flex; flex-direction: column; justify-content: center;} </style>
Looks great with parallax backgrounds too
This section has the chequered background image and it is set to CSS parallax.
Looks great with parallax backgrounds too
This section has the chequered background image and it is set to CSS parallax.
Hello. Great tutorial, but I have a question.
The menu I’m using in my page is set to transparent, and when I use this code, the code takes the space of the menu in consideration and leaves a gap between one section and another. How do I fix it?
do you have a URL?
Hi there! Thank you very much for the tutorial. It works almost perfect for me, but I have the same problem as Romullo with a transparant menu. It would be great if you could tell how to fix this. You can see my test page at https://verhalen.trouw.nl/scrolltest/
Was there a solution found for this issue? I have the same problem and would love the fix.
I fixed the transparant header glitch by giving it a height of 0:
#main-header {
height: 0!important;
}
hey, great work.
this code woks fine in firefox but its not work properly in Chrome.
Please Help
im viewing this blog post in Chrome and it’s working ok for me. Could it be you are loading a cached page?
I cleared everything and also tested with another machine still not working.
How to creata Full page Scrolling in Theme…
I did all the steps but didnt work for me.. i dont know where i am doing wrong. Do you have any video tutorial ?
sorry no video for this one
I’ve found that in Safari and Chrome—so Webkit browsers— though it works scrolling down, the page gets stuck at the bottom, and can’t scroll up again.
It works fine in both directions in Firefox.
Anyway to correct that?
I’ve got the same. Did you get any results with this issue?
So far I can avoid it if the last section is set to be full height (100vh). Which is fine in some circumstances, but not for a footer.
Looks very great!! Is there a way to make this option only available to mobile devices? That would be even greater to me (:
not that i have seen
Hi, great tutorial, it works great with normal mouse. It doesn’t work with touchpad or apple magic mouse. How can I solve this issue?
Thanks!
Hello! I’d love to manage to implement to scroll-to-next-full-screen-section on the page I am working on but unfortunately the scroll is not smooth at all and it jumps and shakes a lot when scrolling down or up. I am using a Mac and I have the same problem in all browsers I have tried. Any suggestion?
Your demo is not working for me. If I use the scroll wheel in this page it just scrolls the page normally rather than scrolling to the next section.
what browser are you using. works ok for me in chrome… not found a good cross browser , non-buggy solution for this effect as yet.
Thank you for the code. I have a question how to make the page scroll down 100 pixels lower?
Hi, it now seams to scroll twice (two sections) is this WP5 and lates DIVI, is there a fix?
Hi There, I am also experiencing the double scrolling mentioned in the previous comment, but it only happens on IOS devices. The page also seems to get stuck at the bottom. Is there any way to fix this please?
Hi Craig,
I notice a small bit of a bounce / judder between sections as you scroll. Is there a fix for this? It’s noticeable in Chrome and Safari but not Firefox, which is perfect. I will post a fix if I find one.
hey, yes, it is a little buggy cross-browser and unfortunately not seen a good fix for it yet. let us know if you have any luck or find a better solution!
Pretty Cool. Would you know by any chance how to adjust the scroll speed, ease in and out when using anchor links? I’d like to see a tut about that.
Hey Craig, great plugin.
I have a serious issue though. I’m using jQuery 3.4.1 for a different section and whenever I load it from the CDN it breaks the scrolling, only on resolution above 980px width.
Hi there. Great tutorial! I just have a question. I have a section higher than 100vh, is there a way I can adjust that section to be able to scroll to the bottom before it snaps to the next section?
Hi there,
Nice tutorial,
I am using it and its great.
One problem. It doesn’t work with a trackpad on a macbook or a any touch mouse.
Any way to fix this?
This website works flawlessly for exempel.
http://brigboats.com/
It also doesn’t work here.
Hi. Did you solve it?
How can I get the same effect on mobile view?
not seen many sites ever do this as I think 99% of people would find it really annoying!