Custom JavaScript Scroll to ID all of a sudden stopped working!

[The SavvyTech SolutionParticipant]

I am using Appfinite's Aspire Pro child theme which I really like, but I wanted to add scroll to ID JavaScript functionality to it whenever an item on the menu is clicked. I used the following JavaScript code and it was working just fine and then all of a sudden it stopped:

$('a[href*="#"]').on('click', function(e) {
  e.preventDefault()

  $('html, body').animate(
    {
      scrollTop: $($(this).attr('href')).offset().top,
    },
    500,
    'linear'
  )
})

BTW, I added the JavaScript code the first time to the js folder within the 'wp-content/themes/aspire-pro/js' location and named it 'savvypro-scroll-To-Id.js' and it worked. However, I like to use the Genesis Extender for custom modifications so I don't have to crack open child theme files if I don't have to and I pasted in that code in the Genesis Extender > Custom > JS editor and it worked as well after I deleted the 'savvypro-scroll-To-Id.js' file, but for some odd reason, about an hour or so later, it simply stopped working and I am at a loss as to why. I tried everything I could find to make it work including adding the 'savvypro-scroll-To-Id.js' file back and enqueuing the script in functions.php as well, but it still didn't work.

I am on Chrome if that helps, but JavaScript is enabled for all websites.

I must have fat fingered something somewhere and didn't realize perhaps, but this is just speculation.

If anyone can help provide some troubleshooting steps for this, that would be great.

[The SavvyTech SolutionParticipant]

BTW, I forgot to add the link to the website, here it is:

https://devsite2.savvyprosolutionsllc.com

[Victor FontModerator]

If you check your browser's console, you'll see this error:

TypeError: $ is not a function

You can't use the $ jQuery shortcut without defining it. You either have to edit your code and replace the $ with the word jQuery or wrap your code to define the $ like this:

<script>
jQuery(document).ready(function ($) {
    "use strict";
    
    //SavvyPro Custom Scroll to ID Script
    
    $('a[href*="#"]').on('click', function(e) {
        e.preventDefault()
        
        $('html, body').animate(
            {
                scrollTop: $($(this).attr('href')).offset().top,
            },
            500,
            'linear'
        )
    })
});
</script>

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[The SavvyTech SolutionParticipant]

Ahh, okay.

I will try that, thanks.

[DisenoWebLleidaParticipant]

Did it work for you
The same thing happens to me and I don't know what to do!

---

EstrellaVisual
Diseño web Lleida

[The SavvyTech SolutionParticipant]

No, this did not work still.

Not sure what the issue is.

[The SavvyTech SolutionParticipant]

Ok well, I have officially given up.

I love Genesis, but I think it is time for me to start moving on to static site frameworks like Hugo or some other JAMstack CMS like Contentful and use AWS instead of SiteGround.

This has just become way too exhausting for me to constantly keep putting up with. I do what all the published blog articles say to do, it doesn't work. I do what these forums say to do, it doesn't work.

Is it time to move on?

Is Genesis and WordPress dead?

[Victor FontModerator]

I went back and looked at your site and it doesn't look like you ever updated the code to pass the shortcut $ to the function. The problem you are having has nothing to do with Genesis or WordPress. You have bad custom jQuery code in the Genesis Extender plugin.

TypeError: $ is not a function custom-scripts.js:3:1

WordPress sets jQuery to compatibility mode. You have to use the code I gave you way back at the beginning if you want this to work or change each of $ characters to the word jQuery.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[The SavvyTech SolutionParticipant]

Apologies, I made the change on DesktopServer, not the actual website. I made the change now on the site, but I am now seeing these errors:

https://www.dropbox.com/s/2m1shprgnwz58dk/Screen%20Shot%202019-09-11%20at%2011.02.46%20AM.png?dl=0

[The SavvyTech SolutionParticipant]

One more question, should I just stop using the Genesis Extender plugin altogether then?

[Victor FontModerator]

It's not possible to understand what the new errors are without seeing the code you added.

As for Genesis Extender, that's a personal choice. I don't have a recommendation one way or the other. I haven't used it in years. I have my own workflows that don't depend on additional plugins.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[The SavvyTech SolutionParticipant]

The code I added is what you suggested above to my savvypro-scrollTo-id.js file located in public_html/.

I added this code here:

<script>
jQuery(document).ready(function ($) {
    "use strict";
    
    //SavvyPro Custom Scroll to ID Script
    
    $('a[href*="#"]').on('click', function(e) {
        e.preventDefault()
        
        $('html, body').animate(
            {
                scrollTop: $($(this).attr('href')).offset().top,
            },
            500,
            'linear'
        )
    })
});
</script>

And then this is the code I put in my functions.php file:

function savvypro_adding_scripts() {
 
	wp_enqueue_script( 'savvypro-scrollTo-id-script', get_stylesheet_directory_uri() . '/js/savvypro-scrollTo-id.js', array( 'jquery' ), '1.0.0', true );
	
	wp_enqueue_script('savvypro_scrollTo_id_script');
}
  
add_action( 'wp_enqueue_scripts', 'savvypro_adding_scripts' );  

[Victor FontModerator]

You're missing semicolons closing off the command lines:

<script>

jQuery(document).ready(function ($) {
    "use strict";
    
    //SavvyPro Custom Scroll to ID Script
    
    $('a[href*="#"]').on('click', function(e) {
        e.preventDefault();
        
        $('html, body').animate(
            {
                scrollTop: $($(this).attr('href')).offset().top,
            },
            500,
            'linear'
        );
    });
});
</script>

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts