Compatibility with OceanWP Theme

Hello,

I think the js comes from Elementor smooth scrolling feature. Can you add some javascript in your theme/child-theme template? If yes, try this:

Add the following code in your theme/child-theme footer.php template, right above the closing body tag (</body>):

<script>
(function($){
    $(window).on("elementor/frontend/init",function(){
        if(typeof elementorFrontend==='undefined') return;
        elementorFrontend.on("components:init",function(){
            elementorFrontend.utils.anchors.setSettings("selectors.targets",".dummy-selector");
        });
    });
})(jQuery);
</script>

Save, test and let me know if it worked.

• This reply was modified 3 years, 9 months ago by malihu.

You’re welcome 🙂

The quickest way is to copy the footer.php template from your theme to your child-theme and apply the script there (in the cloned footer.php in your child-theme dir).

Otherwise you could use the wp_add_inline_script in your child-theme functions.php to add the script via wp_enqueue_scripts.

I’m marking this as resolved but let me know if you need more help.

No problem.

Leave the script as it is, as it disables the Elementor smooth scrolling.

There’s another script in your oceanwp theme that seems to has its own scrolling function and prevents “Page scroll to id” from doing its thing. The script is this one:

...themes/oceanwp/assets/js/scroll-effect.min.js

Do this:

1)Firstly, you need to change your links URL to have the trailing slash before the hash. For example, change your “Kinderyoga” link URL from:

https://michaela.mschoder.at/programs#kids

to:

https://michaela.mschoder.at/programs/#kids

Otherwise your page will be reloaded each time you click the link (your server redirects all requests to the ones with the trailing slash). Do this for all your links.

2)Search within the OceanWP theme settings for an option to disable its smooth scrolling feature/effect. If there is such option, disable it and test your links to see if everything works.

If there’s no such option or it doesn’t have the effect we want, edit your menu in wp admin and add the following class to each one of your menu items:

opl-link

Save the menu and test your links. Smooth scrolling should work.

Let me know 🙂

You’re welcome.

When I checked the OceanWP smooth scrolling function in scroll-effect.min.js, I saw that it checks for the opl-link class (among others) and if it’s present on the link item, the script does not apply its smooth scrolling effect (for that link item).

That’s it. We just used the class that bypasses the smooth scrolling in the OceanWP script 😉

@hpclt Thanks a lot for the solution and feedback 🙂

@hpclt Indeed drop-down-mobile-menu.min.js causes the issue.

The only way to solve this is with some extra javascript. Add the script below in your theme/template:

<script>
(function($){
	$(window).on("load",function(){
		$("#mobile-dropdown li.current-menu-item a.__mPS2id[href*='#']:not([href='#'])").each(function(){
			var $this=$(this),
				_hash=$this.attr("href").split("#")[1];
			$this.attr("href","#");
			$this.attr("data-ps2id-href","#"+_hash);
		}).on("click",function(e){
			e.preventDefault();
			$.mPageScroll2id("scrollTo",$(this).attr("data-ps2id-href"));
		});
	});
})(jQuery);
</script>

Test it and let me know. It should work.

@hpclt You’re welcome 🙂 Thanks a lot for your donation and feedback!