Using Page scroll to id with the Divi Builder plugin
A quick guide for using “Page scroll to id” WordPress plugin with the Elegant themes Divi Builder plugin on your WordPress site.
In WordPress admin, go to Settings → Page scroll to id. Change the Selector(s) option value to:
a[href*='#']:not([href='#'])
Scroll down to “Advanced options” section and enable (check) “Prevent other scripts from handling plugin’s links” option.
and hit Save Changes.
By adding the element selector above, we instructed the plugin to handle all links that have a hash (#) in their URL.
Divi Builder plugin allows us to enter an id value for each section/module we want (via the CSS ID field). This is very handy as a)we don’t need to create our id targets manually and b)makes links highlighting easier and more precise.
In your post/page editor, click the settings icon for the module you want to add a target id
Switch to Advanced tab
Scroll down to find the CSS ID field and enter the id value you want (e.g. my-id)
Click Save & Exit.
When ready, click Update (or Publish) to save your post.
Now, any link you create with URL #my-id (or any id value you entered in the CSS ID field previously) will scroll smoothly to that target. You can create standard/plain links in the post editor, custom links in your menu, links via “Page scroll to id” toolbar icons or shortcode etc. All kind of links will work as long as they point to an existing target id in your page(s).
Disclosure:: Please note that this post may contain affiliate links. If you click these links and purchase an item, I may receive a commission (with zero additional cost to you). This website needs compensation to operate (like any other website on the internet), so affiliate links help a lot!
hi, it takes 2-3 mouse wheel clicks for it to scroll to the next section. Anyway to get it to scroll from just 1 mouse wheel click? thanks
I need to see your site/page in order to help.
Do you use lazy-loading for your site images?
Hi, I’ve followed the instruction but it doesn’t scrool smoothly, instead it jumps direclty to the section I want. Pretty harshly I would say
Hi,
Please post your site URL so I can check what happens. Otherwise it’s impossible for me to help.
Hi, thanks for this great plugin! I’m just wondering, is this possible to achieve the smooth scrolling effect not only by clicking on anchor links but on scrolling the mouse wheel?
Hi,
It’s possible using an extra script. See details and a quick guide here:
http://manos.malihu.gr/page-scroll-to-id-with-mousewheel-and-keyboard/
Thank you so much for putting this together and for creating this documentation! I really wanted this to work, but it seems Divi didn’t want to participate. I referenced this article and seems there is a toggle switch to make the scroll work: https://divibooster.com/fix-divi-anchor-links-not-working-correctly/
Hi,
Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option.
This way you disable Divi smooth scrolling (with all its issues) and let “Page scroll to id” do its thing.
Hi, every time i try to scrool via mouse wheel, the whole section jumps a bit and then scrools to the next element.
What can be causing this?
Kind Regards,
Petar
Hi,
Not sure if you fixed this but it works fine for me.
Just not working. Trying to follow your very easy directions. I am in a production or Staging mode/hosting on a GO Daddy server. Would that make a difference? Using a CSS ID on each module (10 stacked sliders). I have the the CSS ID like this: barn-restorations and the link url in custom-links as /#barn-restorations. Using the yellow background menu part way doen the page. Do you use the full url of the page or with the full slug as I pasted in? Or can you simply do /#barn-restorations. I am aon a deadline trying to make somthing on this page work. ANy help would be appreciated and compensated. Thanks. Jim
You can use any kind of URL you want (full, relative-root, hash only etc.).
When you use full URL, like you do in “Barn Restorations” link, you have to make sure that the link URL matches exactly the URL you see in browser’s address bar.
For example, your link URL is:
http://z96.ec6.myftpupload.com/construction-frame-pole-retail-commercial-construction/#barn-restorationsbut your page URL is:
http://z96.ec6.myftpupload.com/construction-frame-pole-retail-commercial-construction/?et_fb=1&PageSpeed=offThis will not work, as the link URL does not include the URL parameters
?et_fb=1&PageSpeed=off.The link works when you visit the page:
http://z96.ec6.myftpupload.com/construction-frame-pole-retail-commercial-construction/If you want it to work on the page URL you posted (with the URL parameters), you need to change the link URL to:
http://z96.ec6.myftpupload.com/construction-frame-pole-retail-commercial-construction/?et_fb=1&PageSpeed=off#barn-restorationsor simply:
#barn-restorationsHope this helps
Hey so I am currently having issues with the plugin, sometimes it will work for a while and sometimes is stops working right when i insert the anchor id url. once i save and exit the visual builder and view the page, those sections go blank or black, the block elements are there, however it’s blacked out and not viewable.
Have you had this issue before?
Haven’t had this issue before. Can you give me an example?
When you say “when i insert the anchor id url”, what do you mean? Insert the id value in CSS ID field? If yes, what value do you insert?
Divi theme
Prevention scripts from handballing plugin’s links (if passible)
Not Applicable