点击链接滚动到 div答案

【问题标题】：Scroll to div on link click点击链接滚动到 div
【发布时间】：2013-03-25 21:01:40
【问题描述】：

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

我正在为自己构建一个个人作品集 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查看我正在尝试执行此操作的网站

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

【问题讨论】：

它对我来说似乎工作正常，具体是什么“不工作”？
您是否点击了我提供给该网站的链接？你可以看到那里没有工作。
它适用于您为我链接到的网站 - 它只是将您放到标题下方，并为您提供您正在寻找的实际段落。
我需要它来滚动@Jon。请阅读我的问题。
@TyBailey 我点击了这个问题末尾的链接；指向您网站的链接。这对我来说可以;你在测试什么？

标签： javascript jquery hyperlink scroll

【解决方案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;

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

不幸的是，在将所有$ 替换为jQuery 后，它仍然无法正常工作。我现在得到的错误是“Uncaught TypeError: Object #about has no method 'offset'”
是的，它似乎没有初始化目标的 jQuery 对象，它正在获取普通的旧 JavaScript 对象。这行不应该是： var target = jQuery(this.hash) ||目标 = this.hash; ??而不是逗号？

【解决方案3】：

这可能对某些人有用。

尝试使用：

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

而不是

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

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

它帮助了我很多次。

【讨论】：