如何解决Uncaught TypeError: Cannot read property 'top' of undefined错误

Question

我有一个单页网站。 我使用JavaScript添加了平滑滚动。

$(document).ready(function(){
    $("li > a").on('click', function(e) {
    if (this.hash !== "") {
      e.preventDefault();
      var hash = this.hash;

    $('html, body').animate({
         scrollTop: $(hash).offset().top
       }, 800, function(){
     window.location.hash = hash;
     });
    }
   });
  });

这是我的导航HTML代码：

<li class="{{ slug == '/' ? 'active' : '' }}"><a href="#home">HOME</a></li>
<li class="{{ slug == '/about' ? 'active' : '' }}"><a href="#about">ABOUT</a></li>
<li class="{{ slug == '/blog' ? 'active' : '' }}"><a href="#blog">BLOG</a></li>

但是当我转到另一页（比如博客）时，当我再次点击导航回到单页时，出现了错误顶部。 我错过了什么吗？

- Reza

---

在 animate 函数中使用断点或警报检查 $(hash).offset() 的值，如果它是 undefined，那么你就知道错误的原因了。 - Pranav Singh

Answer 1

请确保您已在页面中放置了相关元素，并使用正确的id进行标识：

$(document).ready(function(){
    $("li > a").on('click', function(e) {
    if (this.hash !== "") {
      e.preventDefault();
      var hash = this.hash;
      if ($(hash).length > 0) {
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function() {
          window.location.hash = hash;
        });
      }
    }
   });
  });

ul {
  position: fixed;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class=""><a href="#home">HOME</a></li>
  <li class=""><a href="#about">ABOUT</a></li>
  <li class=""><a href="#blog">BLOG</a></li>
</ul>

<div id="home" style="margin:500px 0;">
Home
</div>
<div id="about" style="margin:500px 0;">
About
</div>
<div id="blog" style="margin:500px 0;">
Blog
</div>

- Chaska

---

是的，ID已经正确。问题仅在于当我转到博客页面然后想要去关于页面时，我收到了未定义顶部值的错误。 - Reza

我猜你的脚本还受到其他影响。你能发布整个HTML标记以进行调试吗？ - Chaska

如何将 if ($(hash).length > 0) { 包装到 animate() 中？就像我更新的代码片段一样。 - Chaska

Answer 2

希望你的哈希标签是'#about'、'#home'和'#blog'，当你获取它们时。

请使用不带 '#' 的哈希标签，因为你的 ID 没有 '#' 哦？

- Akbar Mirsiddikov

---

当我没有使用 # 时，仍然会出现关于 top 值的错误。 - Reza

你有一个id为“blog”、“about”和“home”的内容吗？ - Akbar Mirsiddikov

变量哈希等于这个哈希的子字符串，去掉第一个字符。 试一下这个， 并确保你有id="home"的内容...id="about"...id="blog"。 - Akbar Mirsiddikov

我打开我的网站"http://myblog.com"，然后进入关于部分"http://myblog.com/#about"，再进入博客"http://myblog.com/blog"。但是从博客页面，当我想再次进入关于页面，即URL为"http://myblog.com/#about"时，页面无法工作，因为顶部值未定义。但是如果我删除scrollTop js，则导航完全正常。问题只出在顶部值上。 - Reza

我无法展示所有的HTML代码，但结构如下：

• HOME
• ABOUT
• BLOG

Welcome

About Us

Our Blog

- Reza

更改：<a href="#our-farm">BLOG</a>为：<a href="#blog">BLOG</a>并删除上面要求您添加的 "subtr(1)"。 - Akbar Mirsiddikov