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
Still having this issue with DIVI 3.0 + :P Had to use this patch
Interesting, I thought it was fixed in 3.0. I'll look into that. Thanks, Juan!
Yeah, it seems the Divi fix I was referring to didn't fully solve the issue and the fix given in the post is still required. Thanks again, Juan.
Hi I'm trying to link a button to a Bloom email signup field at the bottom of my page. I've #insideroptin in both places, but when I click the button, the link automatically ends with #insideroptin%20 – I can't figure out why. When I manually delete the %20 in the link, it connects to the right place. How do i remove that %20? Thank you!
Hi evie, %20 is the code for including a space character (i.e. " ") in URLs. I suspect you have a space after the link in the button's settings (i.e. "#insideroptin " instead of just "#insideroptin"). Deleting that extra space should hopefully get it working.
hi i got this issue also,
already use latest divi boster and do "fix divi anchor link scrolling,
they like jump to link not do smooth scroll,
i use not on button but on menus
Hi sapiduduk, are you able to send me a link to the site / page you're working on so that I can take a look? Thanks!
Hi Dan,
I've used it and it does bring me to the right space of my page, not hidden by my header. BUT it does so by opening a new tab !
Can you help me? Thanks,
Best,
Victoria
Hi victoria, looking on Google Chrome, it's not opening in a new tab for me (so hopefully you were able to fix that.. possibly the button module had the option to open in a new tab set?), but it does reload the page. You can prevent the page from reloading by putting just the id in as the Button URL. I.e. try setting the button to "#pro" instead of "http://www.marchand-normandie.fr/menuiserie-miroiterie/#pro", etc. Hope that helps!
Worked like a charm. Thank you kindly! I sure hope they fix this in the regular release.
Hi Dan. I tried posting this code into a current Divi release. When I try to save the code I've added to the "head" area on the Integrations tab, it just spins with the "loading" animation. It just hangs.
I tried a simple alert('test') and that works great. But your code, pasted exactly as above, is not allowed to save…it just "loads" forever. I've tried all kinds of things with your function, including minify, beautify, etc and no matter what it will not save in Integrations.
Hi Dan. I went through this code line by line, hitting save after each section or line, in different combinations. Literally every line of the code can save EXCEPT for one half of one line:
var db_hash_elem = document.getElementById(window.location.hash.substring(1));
This will not save. If I change it to:
var db_hash_elem = 12345
…it will save but of course makes no sense. So, this non-working version of the function will save in Integrations (note the "12345" nonsense):
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 = 12345;
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);
});
}
});
…but this will not (same line edited to have the real getElementById line:
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);
});
}
});
Hey Douglas, I've just sent you an email about this. As I say in it, I've just tested on my own site with the latest Divi and I'm not having this problem. I can't see any obvious error with the code itself (nor should the code matter as it isn't actually being run, just saved, at the point the error occurs. But clearly something is going on (I'm thinking a PHP error is being triggered in the background save for some reason). If you're able to let me log in and take a look, hopefully I can track the problem down. Cheers!
Hey Douglas, I've just sent you an email about this. As I say in it, I've just tested on my own site with the latest Divi and I'm not having this problem. I can't see any obvious error with the code itself (nor should the code matter as it isn't actually being run, just saved, at the point the error occurs. But clearly something is going on (I'm thinking a PHP error is being triggered in the background save for some reason). If you're able to let me log in and take a look, hopefully I can track the problem down. Cheers!
That worked great for me! Thanks! Wonder why this hasn't made it into a Divi update by now.
Just found this article via Google, as I had this problem on one website. It works great, thank you!
very useful – thank you for sharing.
oops sorry forgot to include url http://gutterdrain.forsitewd.com
Thanks!
Thanks hindy!
Hi – I checked this option using divi booster but it doesnt seem to work. Its not scrolling to the top of the "About Us" section and when I click on "about us" from another page – it brings me to the home page but the "ABout us" section remains hidden…appreciate any help you can give me with this…ET didnt answer – i posted a question there.
Hi hindy, I think the problem is that you have an ampersand (&) in your CSS ID. This is triggering a JavaScript error and stopping the linking from working. If you remove it from your CSS ID, that should hopefully fix things.
Dan, I'm using this on another site and its not working on mobile – can you take a look please (on mobile)?? really appreciate it!
http://fountainviewcare.forsitewd.com/about-us/
Hi Hindy, if I take a look at one your pages, e.g. http://fountainviewcare.forsitewd.com/care/#posthospital, I can see that there is no module with the CSS ID of "posthospital". As a result, it's not able to scroll there. Make sure that each page you link to with an anchor link (i.e. using the #somecssid) has a module with the same CSS ID (e.g. "somecssid" in this example, which you can set in the Custom CSS tab of the module settings), and it should work correctly – let me know if you're still having problems with it though.
I have purchased the plugin for this options, but this is not…!
Hi Ilaria, the option can be found on the Divi Booster settings page at "Site-wide Settings > Links > Fix Divi anchor link scrolling". Let me know if you're having problems with it.