Divi scroll to section with mousewheel

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!

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.

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>

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.