javascript - 点击链接滚动到 div

Question

关于这个主题，到处都有问题，但我为此尝试了很多不同的脚本，但我无法让它与我的网站一起使用。

我正在为自己构建一个个人作品集 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;

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

Answer 2

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

代达罗斯比我先到那里。这不是导致您的问题的冲突。只需使用 jQuery 而不是 $。

Answer 3

这可能对某些人有用。

尝试使用：

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

代替

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

这声明了一个本地 $ 而不是与先前声明的冲突。

它帮助了我很多次。