jQuery Easing Wordpress Navigation

Question

I am trying to establish jQuery easing in my Wordpress template so that I might have some cool scrolling effects to div id's further down the page. I've done this before using plain HTML, but I'm a little confused as to how I might establish this with Wordpress' navigation function. Here's the code I've used in the past. Any help on how I can retrofit it is greatly appreciated.

<script src="../js/jquery.min.js"></script>
<script>
function goToByScroll(id){ 
    jQuery('html,body').animate({scrollTop: jQuery("#"+id).offset().top},900); 
    return false; 
}

*/Function/*
<script>function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},900); return false; }</script>


*/Nav Link/*
<li><a onclick="goToByScroll('div1')" href="javascript:void(0)" href="#">Link 1</a></li>

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

Wordpress puts jQuery in no-conflict mode which disabled the $() function. Unless you disable no-conflict mode in jQuery you'll have to use jQuery() instead of $().
Wordpress also includes jQuery for you by default, no need to include them yourself.

Here's how your code should look: (note: you should never have this problem again - now you know Wordpress doesn't have the $() function by default.

<script>
    function goToByScroll(id){ 
        jQuery('html,body').animate({scrollTop: jQuery("#"+id).offset().top},900); 
        return false; 
    }
</script>

OR

<script>
    function goToByScroll(id){ 
        jQuery(document).ready(function($){
            $('html,body').animate({scrollTop: $("#"+id).offset().top},900); 
            return false; 
        });
    }
</script>

Partially taken from: https://stackoverflow.com/a/3744901/1270996

edited May 23 '17 at 11:56

Community

1
1

answered Feb 22 '13 at 05:55

Nick Pickering

3,095
3
29
50

Thanks. I put this in my header file along with my js...how does this affect my code on the navigation itself? Surely I'll need to edit something there. – usefulbattery Feb 22 '13 at 15:34
I did, no good. I have three links in my navigation, each assigned to different ID's. I need to assign each ease to take you to a different location on my page, so there's something I'm going to need to include in my */Nav Link/* that dictates that, correct? – usefulbattery Feb 22 '13 at 15:56

jQuery Easing Wordpress Navigation

1 Answers1