JavaScript - 无法读取未定义的属性'top'

Question

我正在使用Javascript，并举了一个小例子，比如

<script>
$(window).scroll(function () {
if ($("#aboutUs").offset().top > 100) {
$("#aboutUs").addClass("visible");
} else {
$("#aboutUs").removeClass("visible");
}
});
</script>

我的项目有两个页面和一个导航栏来导航每个页面。 它显示如下错误：

core.js:15723 ERROR TypeError: Cannot read property 'top' of undefined   
at <anonymous>:5:47
at dispatch (jquery.min.js:2)
at v.handle (jquery.min.js:2)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:17289)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
at invokeTask (zone.js:1540)
at globalZoneAwareCallback (zone.js:1566)

当我导航到它们时，它会显示这样的错误，结果也不起作用。但是当我刷新页面时，它工作正常。我知道它显示错误，因为页面上不存在该元素。但我确实有它，它在刷新页面后工作。如何摆脱这个错误？谢谢。

Answer 1

if ($("#aboutUs").length) {
if ($("#aboutUs").offset().top > 100) {
$("#aboutUs").addClass("visible");
} else {
$("#aboutUs").removeClass("visible");
}
}

也许您的jquery代码在视图呈现之前正在运行，并且无法找到id为"aboutUs"的元素。因此，首先检查元素是否存在，然后编写代码