• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Custom JavaScript Scroll to ID all of a sudden stopped working!

This topic is: not resolved

Tagged: aspire pro, javascript, scroll to id

  • This topic has 14 replies, 3 voices, and was last updated 5 years, 9 months ago by SavvyPro.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 29, 2019 at 1:20 pm #493293
    SavvyPro
    Participant

    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.

    August 29, 2019 at 2:42 pm #493295
    SavvyPro
    Participant

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

    https://devsite2.savvyprosolutionsllc.com

    August 31, 2019 at 6:55 am #493326
    Victor Font
    Moderator

    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?

    September 1, 2019 at 5:30 pm #493353
    SavvyPro
    Participant

    Ahh, okay.

    I will try that, thanks.

    September 2, 2019 at 7:40 am #493361
    DisenoWebLleida
    Member

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


    EstrellaVisual
    DiseƱo web Lleida

    September 3, 2019 at 1:25 pm #493389
    SavvyPro
    Participant

    No, this did not work still.

    Not sure what the issue is.

    September 5, 2019 at 5:39 pm #493422
    SavvyPro
    Participant

    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?

    September 5, 2019 at 7:02 pm #493428
    Victor Font
    Moderator

    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?

    September 11, 2019 at 12:09 pm #493507
    SavvyPro
    Participant

    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

    September 11, 2019 at 3:06 pm #493512
    SavvyPro
    Participant

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

    September 12, 2019 at 12:33 am #493515
    Victor Font
    Moderator

    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?

    September 15, 2019 at 10:13 pm #493580
    SavvyPro
    Participant

    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' );  
    September 16, 2019 at 5:40 am #493584
    Victor Font
    Moderator

    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?

    September 20, 2019 at 1:35 pm #493667
    SavvyPro
    Participant

    GRRRAAAAAAWWWWWWWW!!!!

    Why isn't my IDE catching this?!!

    I should know better, but dang it, I am in a hurry and working on a Masters, kids, dog, full time job, sick spouse, COME ON technology, you're supposed to be helping me here.

    I will modify it.

    Thanks Vic.

    September 24, 2019 at 10:01 pm #493711
    SavvyPro
    Participant

    Still didn't work.

    I am going to reach out to the publisher of this theme.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble