How to One Touch Scroll with Divi

Onepager are hot! No? Well, I’m doing alot of them lately. Storytelling ~ like, when you lack proper content ~ you know?!

I would not recommend anything to you I've not been using enthusiastically myself. Bold links are affiliate links. I recommend what you'll find there and If you make a purchase, I will get a commission without additional costs to you.

So, I am just about to be done building that onepager with 5 big sections and fullwidth background images when it comes to the creative’s mind how cool it would be if scrolling from section to section could be done with just one flick of the mousewheel.

That’s no problem at all!

she tells me because she had found http://leonburmester.de/ on the web. I should just implement fullPage.js. Unfortunately fullPage.js breaks everything else on the page but fortunately we were using Divi as the parent theme.

Learn

Keep reading for an explanation on how to go on about it.

Keep reading

The button will take you to a step by step guide through the process.
Continue

Watch

Take a look at what this is all about and see the feature in action.

Go there

The button will take you to a project were we implemented this feature.
HIGHSTREET EXPERTS

Download

Get the files from GitHub immediately and for free.

From GitHub

The button will take you to GitHub were the files you need are available.
GitHub

What if ...

we could just use Divi’s dot navigation to jump to the sections at a flick of the mouse? That would not require massive restructuring of the DOM because it is there already and does exactly what we want, just on clicks.

So there should be a custom page template for this special kind of navigation because mousewheel input is gonna be hijacked. And we still want to scroll normal pages like Legal and Data Privacy, don’t we?

Building the Template

We create a folder in our child theme called page-templates ~ you do use child themes, don’t you? In there we create the template file called custom-one-touch-scroll.php.

Inside the template-file, after the opening

* Template Name: One Touch Scroll
* Description: Page template using Divi’s Dot Navigation to implement One Touch Scroll with the mousewheel
*/

we simply load the parent themes page template then.

get_template_part( ‘page’ );

All we need to know is when our custom template is used to then load the JavaScript for One Touch Scrolling.

Assigning the Template

Page Attributes

By now the custom template we just created should show up in the Page Attributes section with the Template Name we have chosen.

This template will behave exactly like the default page template as we are just loading that one with our template. The difference is that we now know when One Touch Scroll is required.

Loading the Script

We create a folder in our child theme called js and In there we create a file called one-touch-scroll.js. We now want to tell out functions.php to load that script when our custom page template is used.

function ots_enqueue() {

  if( is_page_template( ‘page-templates/custom-one-touch-scroll.php’ ) ) {
    wp_enqueue_script( … );
  }

}
add_action( ‘wp_enqueue_scripts’, ‘ots_enqueue’ );

Remember to specify jquery as dependency for our script to load after that.

wp_enqueue_script( ‘ots-js’, get_stylesheet_directory_uri() . ‘/js/one-touch-scroll.js’, array(‘jquery’), ‘1.0’, true);

You can put an alert( ‘ots loaded’ ); inside one-touch-scroll.js for now to check if the script is loading when our custom template is assigned.

Writing the Script

I will just go over the basic concept here skipping sanitization. You can download the script at GitHub if you want to. So first we want to bind a function to the mousewheel scroll event

jQuery( document ).on( ‘mousewheel DOMMouseScroll’, function( event ) { … }

In that function we need the direction of the scroll

var direction = event.originalEvent.wheelDelta || -event.originalEvent.detail;

the position we are currently at as a jQuery object

var $position = jQuery( ‘.et_pb_side_nav’ ).find( ‘.active’ );

and the position we will scroll to ~ again a jQuery object ~ for later

var $target;

As $position is holding the .active a-tag, we now get the parent into $target depending on direction ~ .next() or .prev() ~

$target = jQuery( $position ).parent().next();

Last thing to do is to simulate a click on the $target’s child a-tag

jQuery( $target ).children( ‘a’ ).trigger( “click” );

That Creative was actually right. We have managed to achieve a complex task with good thinking and very little coding thanks to Divi's dot-navigation. No problem at all indeed.

17 thoughts on “One Touch Scroll with Divi”

  1. looks cool. just trying to build out a 1 page layout using this to release (free) on divithemeexamples.com 🙂 is it easy/possible to get the trigger to work for touch also?

      1. ah ok, im including all the code so far in a code module so it can be bundled into a json file and easy to install without the user having to do anything… so maby adding this not practice here.

      2. I added the touchswipe library and then modified your script like this:

        $( document ).on( ‘mousewheel DOMMouseScroll swipe’, function( event ) {

        to intercept swipe events. However it does not work, what else do I need to change in your script?

  2. Thanks for this tutorial. One page scrolling is such a popular design technique. Many people ask how to create this effect in Divi. This Divi child theme does it brilliantly: demo.diywithwp.com/diviscroll
    It has integrated fullpage.js without any issue. You may want to have a look at it.

    Thanks again!

Leave a Comment

Your email address will not be published. Required fields are marked *