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.

4.3 6 votes
Article Rating