Search code examples
jquerywordpressmenujquery-animatescrollto

How to fix broken scroll-to ID on main menu of homepage?

I've taken over the task to maintain a website. Unfortunately the previous maintainer installed quite a lot of WordPress plugins so it's hard for me to figure out which plugin is actually used for what.

I have to figure out, why in our main menu the scroll-to-links are broken but I don't even know where to start. The HTML looks correct:

<a href="#orchester-neu">Orchester</a>

Whereas the link https://www.akkordeonorchester-muenchen.de/#orchester-neu works perfectly fine.

So I looked in the Google Chrome Console which throws Violation Warnings like

[Violation] 'requestAnimationFrame' handler took 107ms

As far as I know, "scroll-to" is done by jQuery "animate" function, so this might be a hint on where to start fixing the problem. But the website uses a child-theme of Simple Key Theme and as far as I know, there is no custom code so far. I don't mind adding custom code but as I said, I don't know where to start looking for the error.

Even though it is a WordPress website, I don't think the issue is related to WordPress but to some JavaScript / jQuery -Script.

Solution

  • Add this jQuery Code and It'll works fine...

    jQuery(document).ready(function($) {
    jQuery( "#primary-menu-container .menu-item a[href^='#']").on( 'click', function ( e ) {
        e.preventDefault();
        var hash = this.hash;
        var scrlTopOff = jQuery('#primary-menu').innerHeight();
        jQuery( 'html, body' ).animate( {
            scrollTop: jQuery( hash ).offset().top - scrlTopOff
        }, 700, function () {
        });
    });
});