Remove Divi Smooth Scrolling to Anchor links

Overview

My customer was annoyed by the default Divi smooth scrolling action when navigating to anchor text. Here is what that looked like.

I couldn’t argue with them as I’m also not a fan of the animation technique Divi uses for anchor text. So, I set out on a quest to uncover how to remove this effect from my customer’s site.

I first disabled the Smooth Scrolling feature in Divi Theme options, but like a lot of things in Divi today, it is mislabeled or buggy and has no effect of Smooth Scrolling for navigating to Anchor links.

I did a lot of googling, wrote many questions to ChatGPT, and even posted to the Divi Theme Users’ Group, but found no answers. Then today, I stumbled upon a script by Garconis Jon Fuller.

His script led me to believe that with a slight modification I could overcome the default Smooth Scrolling effect.

Click to See modiifed JQuery script

1<script>
2jQuery(function($) {
3window.et_pb_smooth_scroll = function($target, $top_section, speed, easing) {var $window_width = $(window).width();$menu_offset = -1;var headerHeight = 0;if ($('#wpadminbar').length && $window_width <= 980) {
4$menu_offset += $('#wpadminbar').outerHeight() + headerHeight;
5}
6else {
7$menu_offset += headerHeight;
8}//fix sidenav scroll to top
9if ($top_section) {
10$scroll_position = 0;
11}
12else {
13$scroll_position = $target.offset().top - $menu_offset;
14}// set swing (animate's scrollTop default) as default value
15if (typeof easing === 'undefined') {
16easing = 'swing';
17}$('html, body').scrollTop( $scroll_position );}
18});
19</script>

Garconis’ script overrides the default et_pb_smooth_scroll JavaScript function that is present in a few core Divi JS files. What is particularly useful about this implementation is that the code is added to Divi > Theme Options > Integration (in the <head> section).

Bear in mind that my implementation will affect Smooth Scrolling on the entire site. That is fine with me, but may not be your desired outcome.

Script Modifications

The two major changes I made to the original script are these which affected the vertical offset from the bookmark set on the page and also removed the animation and simply scrolled to the Anchor link.

1var headerHeight = 0;$('html, body').scrollTop( $scroll_position );

Using this line instead of the one above will give you some animation.

1$('html, body').animate({ scrollTop: $scroll_position }, 0, easing);

The Result

The resulting non-Smooth Scrolling functionality can be seen in the video below.

Customer Website: COVESA Global

Site Designer: Colotera Creative

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Code Post Search

Code Categories

Follow Us

Feel free to follow us on social media for the latest news and more inspiration.

Related Content

Get a Free Service!

Hi, I'm Ernie. I'd like to offer you one of our premium services for FREE. Okay you say, so what's the catch?

No catch. You see I've been doing this internet thing for 30 years.

Ernie St. Gelais - Sitez Incorporated Owner

I've been fortunate in my work life to build two multi-million dollar, online businesses.

I'm now semi-retired and doing my best to give back to online business people like you.

After you complete the form, you will receive an email confirming your FREE service. We'll then communicate to determine how to best make that happen for you and your site.