One Touch Scroll with Divi


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 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.


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.


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.


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.

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.


Share on facebook
Share on twitter
Share on linkedin

Related Posts

WooCommerce SQL

Howto Manipulate WooCommerce Metadata via SQL

With Germanized on board, WooCommerce has several ways to save article numbers. Has the intern spent two days entering the EAN in the wrong field for the 3000 articles in the WooCommerce online shop? Then an SQL superhero has to save the day who can copy content from one field to another in no time.

eCommerce Sales

5 eCommerce Lockdown Tips

eCommerce is booming because since Corona everyone understands the importance of online stores and digitization. We have been supporting online stores since the beginning of the millennium, when you still had to program them yourself, and we would like to tell you here how your eCommerce tools can make good sales and keep you afloat in a crisis.