未捕获的类型错误:无法读取属性'top'的未定义

Uncaught TypeError: Cannot read property 'top' of undefined

本文关键字：属性 未定义 top 读取 类型 错误      更新时间：2023-09-26

如果这个问题已经得到回答，我深表歉意。我尝试过搜索解决方案，但找不到任何适合我的代码的解决方案。我还是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;的第二行引发了一个错误，上面写着"Uncaught TypeError:无法读取未定义的属性'top'"。事实上，第二行下面的其他jQuery代码根本不起作用，除非它们放在上面

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

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

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

您的文档不包含任何类为content-nav的元素，因此方法.offset()返回的未定义实际上没有top属性。

你可以在这个小提琴中看到自己

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

（您将看到"未定义"）

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

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

更新的小提琴。

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

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

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

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

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

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

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

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

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

我在页脚下方按下了我的脚本，它运行得很好！

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

更正：

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

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

错误：

<a href="#">

我遇到了同样的问题（"未捕获类型错误：无法读取未定义的属性'top'"）

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

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

我只希望有人告诉我早点检查我的ID）

在我的案例中，我发现了一个奇怪的问题，当用户发布时，我使用这个功能自动滚动到最后一条评论。实际上，我在不同的页面中添加了两次相同的功能，当一个页面激活它，另一个页面禁用它时，就会出现问题，当两个页面都激活它时，函数成功通过。

太奇怪了：（

相关文章：