javascript - 未捕获的类型错误 : Cannot read property 'top' of undefined - Scrolling error?

Question

这是我的 HTML:

<ul class="nav-list">
   <li class="current"><a class="smoothscroll" href="#home" title="">Home</a></li>
    <li><a class="smoothscroll" href="signup.html" title="">Sign up</a></li>
    <li><a class="smoothscroll" href="signin.html" title="">Sign in</a></li>                
</ul>

这是我的 JavaScript:

var ssSmoothScroll = function() {
    $('.smoothscroll').on('click', function (e) {
        var target = this.hash,
        $target    = $(target);

        e.preventDefault();
        e.stopPropagation();        

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, cfg.scrollDuration, 'swing').promise().done(function () {
           // check if menu is open
           if ($('body').hasClass('menu-is-open')) {
               $('#header-menu-trigger').trigger('click');
           }

           window.location.hash = target;
        });
    });
};

我搜索了几个答案，但仍然找不到我的答案不起作用的原因。非常感谢任何帮助。

我想继续访问signup.html 或signin.html，但是如果我单击它们，这两个链接都不起作用。它们仅在我右键单击并在新选项卡中打开时才起作用。

Answer 1

唯一的原因offset如果你在一个空的 jQuery 集合上调用它，将会返回 undefined 。这告诉我们 $(target) 返回一个空的 jQuery 集，大概是因为 target 包含一个不匹配任何元素的选择器。

您可能需要添加一个防护来实现这一点:

if (!$target.length) {
    return;
}

...就在 $target = ... 之后。

<小时/>

但是，看看您的 HTML:您可能只想从将您带到另一个页面(示例中的后两个页面)的链接中删除 smoothscroll 类。他们似乎唯一的目的是跳转到页面滚动中的 anchor 而不是跳转。由于这些链接位于页外，所以我一开始就不会将类(class)放在它们上面。