JavaScript - 无法读取未定义的属性“顶部”[重复]答案

【问题标题】：JavaScript - Cannot read property 'top' of undefined [duplicate]JavaScript - 无法读取未定义的属性“顶部”[重复]
【发布时间】：2020-04-08 15:28:09
【问题描述】：

我正在使用 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)

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

【问题讨论】：

这能回答你的问题吗？ TypeError jQuery offset().top is undefined
你能发布一个这个代码的小例子吗？我认为 jQuery 只是无法找到 ID 为 #aboutUs 的元素。

标签： javascript jquery html

【解决方案1】：

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

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

【讨论】：

谢谢，伙计们，它现在可以工作了。我对所有这些都很陌生。 $(window).scroll(function () { if ($('#aboutUs').length) { if ($('#aboutUs').offset().top > 100) { $('#aboutUs') .addClass("l-header-thin--visible"); } else { $('#aboutUs').removeClass("l-header-thin--visible"); } } });