未捕获的类型错误：无法读取未定义的属性“顶部”

Posted 2023-02-21

【中文标题】未捕获的类型错误：无法读取未定义的属性“顶部”

【英文标题】：Uncaught TypeError: Cannot read property 'top' of undefined

【发布时间】：2013-12-09 02:49:47

【问题描述】：

如果这个问题已经得到解答，我深表歉意。我尝试寻找解决方案，但找不到适合我的代码的解决方案。我还是 jQuery 的新手。

对于两个不同的页面，我有两种不同类型的粘性菜单。这是两者的代码。

$(document).ready(function () 
    var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () 
        var scrollTop = $(window).scrollTop();
        if (scrollTop > contentNav) 
            $('.content-nav').addClass('content-nav-sticky');
         else ;
            $('.content-nav').removeClass('content-nav-sticky')
        
    ;
    stickyNav();
    $(window).scroll(function () 
        stickyNav();
    );
);
$(document).ready(function () 
    var stickyNavTop = $('.nav-map').offset().top;
    // var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () 
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) 
            $('.nav-map').addClass('sticky');
            // $('.content-nav').addClass('sticky');
         else 
            $('.nav-map').removeClass('sticky');
            // $('.content-nav').removeClass('sticky')
        
    ;
    stickyNav();
    $(window).scroll(function () 
        stickyNav();
    );
);

我的问题是底部的粘性侧边菜单的代码不起作用，因为第二行代码var contentNav = $('.content-nav').offset().top; 引发了一个错误，显示为“未捕获的类型错误：无法读取未定义的属性'顶部'”。事实上，除非将它们放在第二行之上，否则第二行之下的任何其他 jQuery 代码都无法正常工作。

经过一番研究，我认为问题在于$('.content-nav').offset().top 找不到指定的选择器，因为它位于不同的页面上。如果是这样，我找不到解决方案。

【问题讨论】：

请使用jsbin.com。

在 html 中检查 div 是否存在

【参考方案1】：

就我而言，我发现了一个奇怪的问题，当用户发布时，我使用此功能自动滚动到最后一条评论，实际上，我在不同的页面中添加了两次相同的功能，当为一个页面激活它并在其中禁用它时另一个问题是，当在两个页面中激活它时，功能成功通过。

好奇怪:(

【参考方案2】：

如果您在单击<a> 标记时出现此错误。试试下面的代码。

正确：

<a href="javascript:void(0)">

发生此故障是因为您的 href 在 <a> 标记内设置为 #。基本上，您的应用程序正在尝试查找不存在的 href。设置空href的正确方法如上所示。

错误：

<a href="#">

【参考方案3】：

我遇到了类似的问题，发现我试图获取页脚的偏移量，但我正在将脚本加载到页脚之前的 div 中。是这样的：

<div> I have some contents </div>
<script>
  $('footer').offset().top;
</script>
<footer>This is footer</footer>

所以，问题是，我在页脚加载之前调用了页脚元素。

我将我的脚本推到页脚下方，它运行良好！

【参考方案4】：

我遇到了同样的问题（“Uncaught TypeError: Cannot read property 'top' of undefined”）

我尝试了所有我能找到的解决方案，并注意到有帮助。 但后来我发现我的 DIV 有两个 ID。

所以，我删除了第二个 ID，它起作用了。

我只是希望有人告诉我早点检查我的身份证））

【参考方案5】：

您最有可能遇到的问题是页面中某处存在指向不存在的锚点的链接。例如，假设您有以下内容：

<a href="#examples">Skip to examples</a>

页面中必须有一个具有该 id 的元素，例如：

<div id="examples">Here are the examples</div>

因此，请确保每个链接在页面内与其对应的锚点匹配。

【参考方案6】：

我知道这是非常古老的，但我知道这种错误类型是初学者常犯的错误，因为大多数初学者会在加载标题元素时调用他们的函数。鉴于此线程中根本没有解决此解决方案，我将添加它。 这个 javascript 函数很可能是在加载实际 html 之前放置的。请记住，如果您在文档准备好之前立即调用 javascript，那么需要文档中元素的元素可能会找到未定义的值。

【讨论】：

$(document).ready(function () ... );在加载文档时触发，并且与脚本所在的位置无关。但是您说的太对了，没有此包装器的任何脚本在页面顶部注明时都可能无法正常工作。

【参考方案7】：

在尝试获取其偏移量之前检查 jQuery 对象是否包含任何元素：

var nav = $('.content-nav');
if (nav.length) 
  var contentNav = nav.offset().top;
  ...continue to set up the menu

【讨论】：

这行得通！多么简单的解决方案。我还有很多东西要学。非常感谢。

是的，它也适用于我。但是var contentNav = $('.content-nav').offset().top 和你的代码有什么区别？

@Prashant：不同之处在于代码会在尝试获取找到的第一个元素的位置之前检查$('.content-nav') 调用找到的元素数量是否非零。跨度>

***.com/questions/28508939/… 我有桌子，但我仍然收到错误。

@Guffa 谢谢老兄！但是只是想知道......我总是有一个元素，它是一个

【参考方案8】：

您的文档不包含任何类content-nav 的元素，因此.offset() 方法返回undefined，它确实没有top 属性。

你可以在this fiddle看到自己

alert($('.content-nav').offset());

（你会看到“未定义”）

为避免整个代码崩溃，您可以使用这样的代码：

var top = ($('.content-nav').offset() ||  "top": NaN ).top;
if (isNaN(top)) 
    alert("something is wrong, no top");
 else 
    alert(top);

Updated fiddle.

【讨论】：

谢谢你的回答我有不同的问题，但它工作得很好