Same-page scroll in wordpress only works when admin bar is displayed

[beingtree]

Here's a weird issue I'm troubleshooting.

The full site is located here: http://regal.votym.com/

Page scroll works perfectly when you go from one page to an anchor on another page. You can see this by selecting, e.g., "Ease of doing business" under "Why Regal" in the main navigation.

If you go to an anchor on the same page, however, the page either jumps to top or nothing at all happens when you click the link -- but only if the Wordpress admin bar is not showing. You can see this by selecting any other sub-element under "Why Regal" in the main navigation. But more specifically, it seems to be related to whether there's an element with an ID of #wpadminbar or not (i.e., that element doesn't exist at all on this page).

I made two additional test pages:

This one has the #wpadminbar div but none of the css or js associated with the admin bar (i also removed the classes from the div, leaving just the id, and removed all the contents of the div: http://regal.votym.com/test-with-admin-bar.html

The scroll-to links work fine.

This, just as proof of concept, is a page identical to test-with-admin-bar.html, except I removed the wpadminbar ID from the div (instead of removing the div entirely): http://regal.votym.com/test-no-admin-bar.html

The scroll-to links do not function.

Turning off "Enable for all elements" doesn't change anything.

I also tested turning off each option in the plugin (except the WP menu, because that's what I'm working with) one by one to see if one of those had an effect, and changing animation speeds, delays, etc., to no avail.

It's really weird; I can't find anyone else discussing this problem, and I suppose it could be something to do with the theme (Transpress by Flexipress, using a child theme with just style edits), but thought maybe somewhere along the line you'd encountered it? I'll keep troubleshooting and if I find anything more, post it here.

[malihu]

I checked your page and the issue you're having seems to come from the js click function that starts at line 28 in: ...themes/transpress/assets/js/main.js?ver=1.1

It seems the theme has an internal function to scroll same page links which either conflicts with "Page scroll to id" or just not working as expected (regardless of plugin being present).

This affects you menu links only (I did a test and created a page-scroll-to-id off-menu link and it worked as expected).

I can tell you that if you remove (or comment-out) the following from main.js, your issues will be fixed

// Performs a smooth page scroll to an anchor on the same page
$(document.body).on('click', '.vu_main-menu a[href*="#"]:not([href="#"]), .vu_mobile-menu a[href*="#"]:not([href="#"])', function(){
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            if( $('.vu_mobile-menu').is(':visible') ){
                $('body').removeClass('vu_no-scroll');
                $('.vu_mobile-menu').fadeOut();
            }
            $('html,body').stop().animate({
                scrollTop: target.offset().top - parseInt($('#vu_menu-affix .vu_main-menu-container').outerHeight()) - parseInt($('#wpadminbar').outerHeight())
            }, 800);
            return false;
        }
    }
});

Let me know if this works for you :)

[beingtree]

THANK YOU!

commenting that out.... or in fact just commenting out the return false; line works! (if you want to share trade secrets on how you discovered the problem so fast, i'm listening :) )

hoping the client will be ok with my "turning off" the theme scrolling since they wanted to use your plugin (making the theme's code redundant, really)... but i'm still going to investigate why we don't see the problem when the admin bar is displayed.

(i didn't "close" in case i find anything else that might be helpful to you or someone else encountering this problem... so i can post it here)

thank you again, tree

[beingtree]

woo! OK, thank you again and....

I'll be letting the theme author know. The problem is in this line:

$('html,body').stop().animate({ scrollTop: target.offset().top - parseInt($('#vu_menu-affix .vu_main-menu-container').outerHeight()) - parseInt($('#wpadminbar').outerHeight()) }, 800);

When the #wpadminbar doesn't exist, parseInt($('#wpadminbar').outerHeight()) returns NaN... and so everything just fails, and then the return false; prevents your plugin from taking over even.

[malihu]

Great, glad you solved it :)

I usually just use Chrome's developer tools to quickly find issues. For example, I inspected your links and checked that plugin was in fact enabled on them (it adds special classes, data attributes etc.). Then I clicked on the "Event Listeners" tab to see what javascript click events are applied on each link. From there, I saw that main.js had a click event registered, so I clicked the file link which opens in "Sources" panel. This way I was able to see the code, element selector etc.

I also use the Chrome addon "jQuery audit" which lets me easily find jquery events on any element I inspect. I can differentiate the events because "Page scroll to id" has a namespaced click event (mPS2id), so when I see 2 click events, I know I have to investigate if there's a conflict with some other script, plugin etc.

Since I am the plugin's developer and know exactly how it works, I can find issues and conflicts fairly quickly but using dev tools along with addons like jQuery Audit will get you on track to solve most problems ;)

[beingtree]

jquery audit! gonna get it.

i used chrome dev tools to narrow it down... my next step was to download the whole site and look for events or whatever on wpadminbar .... and you found it before i got the site downloaded. thanks again! and thanks for these tips.

On Oct 29, 2016, at 5:24 AM, Manos notifications@github.com wrote:

Great, glad you solved it :)

I usually just use Chrome's developer tools to quickly find issues. For example, I inspected your links and checked that plugin was in fact enabled on them (it adds special classes, data attributes etc.). Then I clicked on the "Event Listeners" tab to see what javascript click events are applied on each link. From there, I saw that main.js had a click event registered, so I clicked the file link which opens in "Sources" panel. This way I was able to see the code, element selector etc.

I also use the Chrome addon "jQuery audit" which lets me easily find jquery events on any element I inspect. I can differentiate the events because "Page scroll to id" has a namespaced click event (mPS2is), so when I see 2 click events, I know I have to investigate if there's a conflict with some other script, plugin etc.

Since I am the plugin's developer and know exactly how it works, I can find issues and conflicts fairly quickly but using dev tools along with addons like jQuery Audit will get you on track to solve most problems ;)

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or mute the thread.