OceanWP breaks scroll to anchor in Elementor

Hello @neolondon,

On your URL, I didn’t see the anchor link.
Could you please share a screenshot of your issue?

Also, can you please provide some info on the plugins you have?

For troubleshooting, please do the following steps and let me know the results:
1- Head over to WP Dashboard > Plugin.
2- Deactivate all plugins.
3- Then, first activate the Ocean Extra plugin.
4- Check your issue.
5- Then, activate your plugins one by one
6- After activation of any plugins, check your issue

Note: if you have a cache plugin or server cache. You need to clear its cache contents or disable them.

Please keep us posted.

Best Regards

Hello @shahin and @neolondon. There is a conflict between OceanWP and Elementor Smooth Scroll, they attach an event to <a href="#whatever"> at the same time and when anchor is clicked they are both triggered causing this strange behavior.

It’s default JS and can’t be disabled:
themes\oceanwp\assets\js\theme.vanilla.js: lines 2379>2386
plugins\elementor\assets\js\frontend.js: 1542 > 1561

Is it possible to add smooth scroll as optional in Theme Panel > Scripts and CSS?

Meanwhile, as an ugly solution, you can search and replace this code in oceanwp\assets\js\theme.vanilla.min.js . This will disable OceanWP smooth scroll on anchors. Take in mind that you should do this replacement again when you update OceanWP theme.

forEach(function(e) { e.addEventListener("click", (0, r.default)(l, f)) }

forEach(function(e) { /*e.addEventListener("click",(0, r.default)(l, f))*/ }

• This reply was modified 3 years, 5 months ago by Altura.

Hey Shahin & alturaestudio,

I did everything you said already Shahin and the problem still persist.

What you said alturaestudio seemed like a viable option but I can’t find the code in theme.vanilla.min.js therefore I can’t change it…

I’m stuck.

@neolondon You are right. Sorry for that! This code was checked on version 3.0.5 but the new version of OceanWP is different. I’ve updated to 3.0.7 and smooth scroll it’s working fine again without the suggested replacement.

Could you check if you have the latest version? Remember to flush server cache and delete your browser cache (i.e. Ctrl + F5) after the update.

@alturaestudio I was already on 3.0.7 and I got everything else up to date already too. The problem still is present on my website even after clearing all the caches.

For now I have removed the anchor from my home page but I still have one at this page: https://www.neolondon.art/a-propos/

To go to the anchor simply press the button ”en apprendre plus”.

You will notice that the problem is still present…

@neolondon Yes, I see the problem and it’s exactly what I saw on my websites. Could you deactivate Autooptimize plugin for some minutes?

@alturaestudio I deactivated Autoptimize but the problem is still present. It was there before I even installed Autoptimize… The only way to get rid of it is to remove OceanWP but then I lose my favorite theme…

I know that feeling. I almost found the code you need but I need Autoptimize and CDN disabled to get the right file.

• This reply was modified 3 years, 5 months ago by Altura.

Ok I will leave it disabled for you to look into it.

It’s disabled.

In /wp-content/themes/oceanwp/assets/js/theme.vanilla.min.js find and replace this lines:
querySelectorAll('a[href*="#"]:not([href="#"]), a.local[href*="#"]:not([href="#"])
querySelectorAll('a.local[href*="#"]:not([href="#"])

This will remove the <a href="#whatever"> elements from OceanWP smooth scroll. Let’s see if this works!

• This reply was modified 3 years, 5 months ago by Altura. Reason: theme.vanilla.min.js is the right file

I know that feeling. I almost found the code you need but I need Autoptimize and CDN disabled to get the right file.

for future reference: you can disable Autoptimize for a specific request by adding ?ao_noptimize=1 to the URL ??

frank (ao dev)

@alturaestudio Tried what you just said and the scroll is still problematic… Why is there no official solve of this problem?

@optimizingmatters Thank you! I didn’t know that.

@neolondon When I go to https://www.neolondon.art/wp-content/themes/oceanwp/assets/js/theme.vanilla.min.js this file doesn’t reflect my proposed change. This is why it’s still broken.

Here is a checklist:
+ Have you edited the right file? Find theme.vanilla.min.js and check if changes are made.
+ Are you using a security or file integrity check plugin? Try to disable this plugin for a while and proceed to reedit the file.
+ Are you using a CDN? Try to flush their cache.

@alturaestudio It did not reflect the changes because I reverted back to the original file but I just made the changes again so you can see that the problem is still there.

• This reply was modified 3 years, 5 months ago by neolondon.