在链接点击时滚动到div

Question

关于这个主题，所有关于SO的问题都存在问题，但我已经为此尝试了大量不同的脚本，我无法使用它与我的网站一起工作。

我正在为自己构建个人作品集wordpress主题，并希望将其保持为单页主题。我想要的是当用户点击导航上的链接时，页面向下滚动到该部分。容易吗？否。

我不知道为什么它不能在我的网站上运行，但我认为它与我用于滚动固定导航的脚本有关。

以下是我目前尝试用来创建此页内导航滚动效果的脚本：http://css-tricks.com/snippets/jquery/smooth-scrolling/

这是我用来创建滚动到固定导航效果的脚本：

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";
    }
}

您可以在http://www.tylerb.me

上查看我尝试执行此操作的网站

这两个脚本是否相互矛盾并使其中一个不起作用？

Answer 1

似乎wordpress使用jQuery.noConflict()方法来防止发生冲突。由于脚本冲突（例如，moo工具也使用$），请将每个$替换为jQuery。这应该可以解决你的问题..我的意思是在调用插件的代码中，而不是插件本身。

示例：

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

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

更新1：

您似乎忘了单独留下$。这一行：

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

应该是这样的：

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

这当然适用于以$开头的任何变量。不应删除那些。

Answer 2

你的问题的核心是jQuery没有加载。

达达罗斯刚在我面前。引起您的问题并不是冲突。只需使用jQuery而不是$。

Answer 3

这可能对某些人有用。

尝试使用：

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

而不是

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

这声明了一个本地$而不是与之前声明的。（/ p>）冲突

它帮了我很多次。