The Divi Theme has a nice feature whereby you can use CSS IDs as anchor links. If you give one of your Divi Builder components (a section, module, etc) a CSS ID of, say, "jumptohere", then you can create a link of the form https://www.mysite.com/mypage/#jumptohere and when clicked it will take your user straight to the part of the page with that component.
Unfortunately Divi doesn't always scroll to the right place. Sometimes it will scroll a bit past the top of the target section. Here's what to do about it.
Fixing the Anchor Link Scrolling with Divi Booster
Divi Booster has had a feature to address the issue since version 2.1.8. It operates in a somewhat similar way to the option (mentioned later in this post) that was available in earlier versions of Divi and is now implemented in Divi by default. However, I've had some reports where the Divi Booster feature has worked where the built-in Divi option hasn't, so you may find it works for you.
You'll find the option at:
Divi > Divi Booster > Site-wide Settings > Links > Fix Divi anchor link scrolling
Fixing the Anchor Link Scrolling with JavaScript
If you don't have Divi Booster, here is the JavaScript code it uses to implement the anchor link scrolling fix:
<script>
document.addEventListener('DOMContentLoaded', function(event){
if (window.location.hash) {
// Start at top of page
window.scrollTo(0, 0);
// Prevent default scroll to anchor by hiding the target element
var db_hash_elem = document.getElementById(window.location.hash.substring(1));
window.db_location_hash_style = db_hash_elem.style.display;
db_hash_elem.style.display = 'none';
// After a short delay, display the element and scroll to it
jQuery(function($){
setTimeout(function(){
$(window.location.hash).css('display', window.db_location_hash_style);
et_pb_smooth_scroll($(window.location.hash), false, 800);
}, 700);
});
}
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
[Deprecated] Fixing the Anchor Link Scrolling in the Divi Theme Options
Update: The Divi 4.6.5 update removed this alternative scroll-to-anchor option from Divi Theme Options and made it the default behavior, so this section can be ignored unless you are on an older version of Divi. – Thanks to Randy for pointing this out.
Divi itself recognizes the problem and now has a setting which attempts to solve it. The setting is disabled by default, but you can enable it at:
Divi > Theme Options > Navigation > General Settings > Alternative scroll-to-anchor method
Just here to say THANK YOU SO MUCH… XD
the code:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
in the "functions.php" work really good!
Saul – Need Branding
Great to hear that it worked for you, Saul! Thanks :)
I have found here:
https://divi.help/threads/scroll-effect-problem.8999/
something that works for me:
"You may try the below code in your child theme functions.php & see if it works:
Code:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );"
I have used the Code Snippets, not child theme
Hey Rebelscumsky, thanks for sharing. It makes sense as lazy loaded images only start loading once they are scrolled into view and take some time to load, so an anchor scrolling past them could trigger them to load and then shortly after they will be added to the page, changing the page length and throwing off the anchors. Much appreciated!
Disabling lazy loading worked for me too! Can't tell you how long I spent trying to solve this issue so a big thank you :)
How this will effect performance etc. I do not know yet. I might see if its possible to just disable lazy loading for the specific page I had the issue with.
Yeah, thanks again Rebelscumsky. Steve, I haven't tested it, but I imagine you'd be able to do something like this:
function disable_lazy_load_for_specific_page( $enabled ) { if ( is_page( 123 ) ) { // Replace 123 with your specific page ID return false; } return $enabled; } add_filter( 'wp_lazy_loading_enabled', 'disable_lazy_load_for_specific_page' );If it's a post rather than a page, then use is_single(123) instead of is_page(). Anyway, if you have any trouble getting it working, let me know and I'll set up a proper test. Thanks!
Thanks Dan. That works perfect! For anyone else reading this my specific issue was anchor links not going to their correct place for a long web page, but only on mobile devices – worked fine on desktop. Disabling lazy loading for the specific page fixes the issue.
You're welcome, Steve. I'm glad that helped and thanks for the clarifying the original issue. Cheers!