I have used this jquery script on many of my sites with the same theme, settings, etc.

It's in a wordpress Genesis Child theme.

On my current local build, however, when I click on an a href that has the class "scroll", I am getting a console error that reads:

enter image description here

Line 19 of my app.js is this code that I have never had an issue with before:

$(".scroll").click(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) {
                $("html, body").animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;

I am running jQuery 3.3.1. I have commented out all code in the app.js to identify where the issue may be coming from. This code is right at the top and I have added console.logs all over the document, which show in Console.

What am I doing wrong here?

Thank you!

  • Oops, I was too fast at replying. Did you use an anonymous function where you pass in jQuery to be mapped to the dollar sign $? Or a document ready where you pass the dollar sign? You need one of those functions. How do you initialize your script? Please post all your code, so we could help you. – Remzi Cavdar Oct 24 '18 at 16:51

In WordPress jQuery is loaded in noConflict mode, it means that you need to use jQuery instead of the dollar sign $

You could wrap the code in an anonymous function (technically any IIFE) where you pass in jQuery to be mapped to $ and combine this with document ready, like this:

jQuery(document).ready(function($) {
    // $ Works! You can test it with next line if you like
    // console.log($);

You could also do it without document ready (not recommended):

(function($) {
    // $ Works! You can test it with next line if you like
    // console.log($);
})( jQuery );

See link for more explanation: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.