Jquery script not loading on site Front page

Question

I've been working on updating a site which was running on an old version of WordPress, I've had to update the theme, most of the plugins and finally got the WordPress up to date. I've had to do a few customisations including using plugins to replace old theme functions that the site used which are not present/working in the updated theme. The theme is now not supported by the developer.

The only thing stopping the site going live is that a scroll up button doesn't work properly on the Home page. The scroll up button appears after a user scrolls down a page and when clicked on smooth scrolls to the top of the page and disappears. This is acheived using a bit of jQuery that has been added to the theme's custom.js file.

The custom.js file starts with the line:

jQuery(document).ready(function($) {

The button script works fine on all the other pages but not on the front page where it seems the jQuery script has not been loaded. Here's the bit of jQuery:

    /* --------------------------------------------------------------------------- */
/*  13. Back to Top
/* --------------------------------------------------------------------------- */

$("#back-top").hide();

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#back-top').fadeIn();
    } else {
        $('#back-top').fadeOut();
    }
});

$('#back-top a').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

});

I'm at the point where I'm just going to wpenqueue the required script to make it work anyway but I'd rather fix the problem which may be obvious to some but now has me going in circles.

The site can be seen at http://just7.co.uk/latinlink/

UPDATE 28/10/2013:

I've copied the jQuery code and put it into its own script and enqueued the script via functions.php. I can see the script (backtotop.js) loading but it still isn't working on the home page but works on all others.

Here's the script:

jQuery(document).ready(function() {
    jQuery("#back-top").hide();

    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) {
            jQuery('#back-top').fadeIn();
        } else {
            jQuery('#back-top').fadeOut();
        }
    });

    jQuery('#back-top a').click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});

The site is at http://www.just7.co.uk/latinlink

Answer 1

Wordpress uses jQuery noConflict wrappers so the dollar sign will not work unless it is used as an alias. Either wrap your code in:

 jQuery(document).ready(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
});

Or just change all the dollar signs to "jQuery". Also you should alway enqueue your scripts even if they are tiny.

More about it here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Answer 2

This turned out to be a javascript security error on the home page only that was preventing any other scripts running. The error was coming from one of the theme's minified js files so couldn't be fixed and the theme is no longer supported.

Time for the site owner to get a new theme :-)