每次单击链接时都会出现脚本错误答案

【问题标题】：Getting a Script Error Every Time I Click a Link每次单击链接时都会出现脚本错误
【发布时间】：2012-09-19 03:23:21
【问题描述】：

我的网站上一切正常，但由于某种原因，每当我单击网站上任何位置的链接时，我都会在控制台中收到一条错误消息。错误与这里的这行编码有关：

jQuery(function($){
  $('.navbar a, .scroll a, .smoothscroll a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 850,'easeInOutExpo');

    event.preventDefault();
  });
});

我得到的错误是：

“SCRIPT5007：无法获取属性‘top’的值：对象为空或未定义 custom.min.js，第 6 行字符 197"

它突出显示的确切代码是上述代码的这一部分：

$('html, body').stop().animate({
  scrollTop: $($anchor.attr('href')).offset().top
}, 850,'easeInOutExpo')

我所知道的是，当我删除上述代码时，我的滚动到链接停止在以下页面上工作：

http://www.northtownsremodeling.com/things-to-know.php

您可以通过转到带有如下过滤器的页面来轻松查看弹出错误并留在控制台中：

http://www.northtownsremodeling.com/bathroom/

然后单击其中一个过滤器按钮。

最终，我正在努力做到这一点，以便我的滚动到设置仍然有效，但不再出现该错误。我很久以前就制作了这个脚本，当一切正常运行时，我真的很困惑是什么导致了这个错误？

谢谢！

【问题讨论】：

console.log($($anchor.attr('href'))) 是否首先输出所需的值？
嗯，我似乎在任何地方都没有.navbar a, or .scroll a，我只有具有 .smoothscroll 的 div 类，而则调用了它平滑滚动到的#。我刚刚删除了上面的两个，仍然报错，错误指向“.top”属性，说“Uncaught TypeError: Cannot read property 'top' of undefined”

标签： javascript jquery html navigation anchor

【解决方案1】：

您遇到的问题是给出错误的代码是用于滚动到预定义的 div，并且您在 url 的标签（单击链接的 href 属性）中有它的 id（目标 div）。

这是当你点击“普通”链接时出现的问题，因为它不包含标签，它是页面上存在的元素的 id，所以$($anchor.attr('href')) 给出了空数组，因为没有这样的元素可以用 ie @ 选择987654322@，所以，在这种情况下，offset() 是未定义的，会给你一个错误。

要解决此问题，请替换：

$('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top
}, 850,'easeInOutExpo');

与：

// get target div to scroll to
var target = $($anchor.attr('href'));
// if target is valid, scroll to
if(target && target.offset()){
    $('html, body').stop().animate({
        scrollTop: target.offset().top
    }, 850,'easeInOutExpo');
}

【讨论】：

好吧，那行得通...虽然现在我对我的代码在做什么以及我在里面有哪些不必要的代码感到非常困惑.. 你需要什么信息了解发生了什么？
好的，非常感谢，这非常有效。我这样做错了吗？我觉得我有点用你的解决方案来操纵它，我觉得我只是简单地使用错误的代码来做我想做的事情。将您的解决方案放入其中，但效果很好，非常感谢！
@SperanskyDanil 感谢您的回复，我只是有点困惑您的意思。 “指定选择器以仅将事件绑定到导航链接”是什么意思？您将其设为“.nav a”，但这与我目前使用的“.smoothscroll a”概念不一样吗？ -谢谢
是的，它是同一个概念，但是你使用.smoothscroll a选择器，这意味着在具有smoothscroll类的elem中的“a”。因此，如果还有一个不是用于滚动而是用于导航到另一个页面的 a ，那么就会出现您的错误。您可以为所有作为滚动导航器的锚元素添加一个类，以便您可以在单击选择器中将它们过滤掉。基本上，您需要避免处理没有滚动目标的锚元素的点击事件。
哦，好吧，我几乎搞砸了将 .smoothscroll 作为一个类随处使用的用法，因为每当我在 Smoothscroll 类中有一个合法链接时，它就会在我不想要的时候发挥作用它去做。我只是犯了一个错误，将平滑滚动绝对放在任何地方，认为这没有什么问题，但实际上这样做有问题..感谢您的澄清！

【解决方案2】：

演示：http://jsfiddle.net/SWgYD/

我认为这是因为href 属性不包含右选择器。如果链接符合 id 为nav 的块，则链接的href 属性应为#nav。

您应该只将事件处理程序绑定到导航链接。

【讨论】：