jQuery(document).scroll() not firing on my page, why?? WordPress

Duncan O'Neill answers:

Hi there,

in the version which works, you call the jquery-ui-1.10.0.custom.min.js BEFORE your jquery.scrollTo-min.js script. I'm guessing that this is the difference, because it seems likely that the scrollTo-min.js script depends on the jquery-ui.... script.

Try using [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]wp_enqueue_script[[/LINK]] to make the scrollTo-min.js depend on the jquery-ui script.

best,

Francisco Javier Carazo Gil answers:

To be able to make one script depends on another do the next:

wp_enqueue_script(
'jquery-ui',
get_template_directory_uri() . '/js/YOUR_JQUERY_UI.js',
array('jquery')
);
wp_enqueue_script(
'scroll-to',
get_template_directory_uri() . '/js/YOUR_SCROLL_TO.js',
array('jquery', 'jquery-ui')
);


WisdmLabs answers:

Hello Mackrider,

While the other approaches are definitely good and apt, this will simplify the steps even further.

If you have added scripts directly into your theme's header.php, then writing jquery.scrollTo-min.js below jquery-ui-1.10.0.custom.min.js should work. If it is coming through theme's code, then try appending following code at the bottom of functions.php residing in the theme's folder.


function adding_scrollto_script() {
wp_enqueue_script('theme-jquery', get_template_directory_uri().'/js/jquery.js');
wp_enqueue_script('theme-jquery-ui', get_template_directory_uri().'/js/jquery-ui-1.10.0.custom.min.js' , array('theme-jquery'));
wp_enqueue_script('scrollto-script-on-homepage', get_template_directory_uri().'/js/scripts.js', array('theme-jquery-ui'), false, true);
}

add_action('wp_enqueue_scripts', 'adding_scrollto_script');


surefirewebserv answers:

WordPress Already comes with jquery. If all your trying to do is scroll, then this may be the easiest.

add_action('wp_enqueue_scripts','gs_enqueue_scripts');
function gs_enqueue_scripts () {
wp_enqueue_script('scrollto-script-on-homepage', get_template_directory_uri().'/js/scripts.js', array('jquery'), false, true);
}

Then in your scripts.js add no conflict code.

/*SMOOTH SCROLLING*/
jQuery(".scroll, .gototop a").click(function(event){
event.preventDefault();
jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top}, 500);
});

Edit the classes etc as it suits your site.