Question

我遇到了一些问题。我有jquery代码，我收到错误： 未捕获的TypeError：无法读取未定义的属性“top”。 我无法解决这个问题。

我的代码

<script>
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 300);
        return false;
    });
</script>

我非常感谢任何帮助。

Answer 1

offset返回undefined的唯一原因是，如果您在空的jQuery集上调用它。这告诉我们$($(this).attr('href'))没有找到任何元素 - 例如，$(this).attr('href')与运行时的任何元素都不匹配。

Answer 2

根据我的理解（因为没有HTML标记），您的href值没有#符号的值，如下所示。

 <a href="top">LINK</a>

在上述情况下，您的代码将在控制台中显示错误Uncaught TypeError: Cannot read property 'top' of undefined。请参阅DEMO。这是因为代码执行类似于$('top').offset.top()，这显然是通过错误。

您必须在#元素或jquery代码中添加href，如下所示。

 <a href="#top">LINK</a>

或

  $('a').click(function(){        
    $('html, body').animate({
        scrollTop: $('#' + $(this).attr('href') ).offset().top
    }, 300);
    return false;
});

您可以在此处查看更新的DEMO。

以下代码段。

$('a').click(function(){        
        $('html, body').animate({
            scrollTop: $('#' + $(this).attr('href') ).offset().top
        }, 300);
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="top">LINK</a>
<p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p><p>something goes here</p>
<div id="top">
THis is the main div
</div>

阅读顶级属性

2 个答案: