Scroll to div on link click

Question

There are questions all over SO about this topic, but I've tried a ton of different scripts for this and I cannot get it to work with my site.

I am building a personal portfolio wordpress theme for myself, and would like to keep it a one page theme. What I want is when a user clicks a link on the navigation, the page scrolls down to that section. Easy right? No.

I don't know why it isn't working on my site, but I think it has to do with the script I am using for the scroll to fixed navigation.

Here is the script I am currently attempting to use to create this in-page navigation scrolling effect: http://css-tricks.com/snippets/jquery/smooth-scrolling/

And here is the script I am using to create the scroll to fixed navigation effect:

window.onscroll=function () {
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    if(top > 640){
        document.getElementById("nav").style.position = "fixed";
        document.getElementById("nav").style.height="65px";
    } else {
        document.getElementById("nav").style.position = "relative";
        document.getElementById("nav").style.height="65px";
    }
}

You can view the site I am trying to do this on at http://www.tylerb.me

Are the two scripts contradicting each other and making one of them not work?

Answer 1

It would appear wordpress uses the jQuery.noConflict() method to prevent well.. conflicts from occurring. Because of the script conflicts(moo tools uses $ as well, for example), replace each $ with jQuery . This should fix your issue.. and I do mean in the code which calls the plugin, not the plugin itself.

Example:

//normal jquery method call:
$("element").method(etc);

//with noConflict code:
jQuery("element").method(etc);

UPDATE 1:

It would appear that you forgot to leave a particular $ alone. This line:

var target = jQuery(this.hash), target = this.hash;

Should be this:

var $target = jQuery(this.hash), target = this.hash;

This of course goes with any variable that begins with a $ . Those ones should not be deleted.

Answer 2

The core of your issue is that jQuery is not loading.

Daedalus just got there before me. It's no conflict that's causing your issue. Just use jQuery rather than $.

Answer 3

This could prove useful to some.

Try using:

jQuery(document).ready(function($){
    // do stuff here using $
});

instead of

$(document).ready(function($){
    // do stuff here
});

This declares a local $ instead of conflicting with the previously declared.

It helped me lots of times.