Enhancing user navigation and improving the sharing of specific web page sections can be achieved by updating the URL in the browser's address bar when anchor links are used.
This technique ensures that the URL reflects the current section, making it easier for visitors to bookmark and share direct links to particular parts of your content.
In this article, we will guide you through the process of updating the URL dynamically when anchor links are clicked.
Go to WordPress Dashboard → Divi → Theme Option → Integration tab → Header
Add this JS code:
<script class="et_fb_ignore">
jQuery(document).ready(function () {
jQuery('#top-menu a[href*="#"]').click(function () {
let hash = jQuery(this).attr('href').split('#')[1];
if (hash > 0) {
window.location.hash = hash;
}
});
});
</script>
Note: For the same, if you want it for other places, not for the primary menu, you can replace the selector in the jQuery #top-menu a to your choice CSS selector.
Or if you are looking for a universal code that applies to all anchor links, then you can use this script:
<script class="et_fb_ignore">
jQuery(document).ready(function () {
jQuery('a[href*="#"]').click(function () {
let hash = jQuery(this).attr('href');
if (hash != "#") {
setTimeout(function () { location.hash = hash; }, 800);
}
});
});
</script>