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> 2 jQuery(function($) { 3 window.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 } 6 else { 7 $menu_offset += headerHeight; 8 }//fix sidenav scroll to top 9 if ($top_section) { 10 $scroll_position = 0; 11 } 12 else { 13 $scroll_position = $target.offset().top - $menu_offset; 14 }// set swing (animate's scrollTop default) as default value 15 if (typeof easing === 'undefined') { 16 easing = '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.
1 var 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.
Related Links
Customer Website: COVESA Global
Site Designer: Colotera Creative
0 Comments