javascript - 使用导航栏滚动 - 未捕获的类型错误 : Cannot read property 'top' of undefined

Question

我在网站的 console.log 中收到一条错误消息

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

如果有人可以看一下我已经得到的代码，并帮助我找出问题所在。

当前代码:

HTML(导航栏)

<!-- Navigation buttons -->
<div class="collapse navbar-collapse navbar-right">
     <ul class="nav navbar-nav">
         <li class="scroll active"><a href="#home">Home</a></li>
         <li class="scroll"><a href="#services">Solutions</a></li>
         <li class="scroll"><a href="#features">Featured</a></li>
         <li class="scroll"><a href="#customers">Customers</a></li>
         <li class="scroll"><a href="#partners">Partners</a></li>
         <li class="scroll"><a href="#about">About</a></li>
         <li class="scroll"><a href="#meet-team">Team</a></li>
         <li class="scroll"><a href="#blog">Blog</a></li> 
         <li class="scroll"><a href="#get-in-touch">Contact</a></li>                        
     </ul>
</div>

JavaScript 和 JQuery

// Navigation Scroll
$(window).scroll(function(event)
{
    Scroll();
});

$('.navbar-collapse ul li a').on('click', function()
{
    $('html, body').animate(
    {
        scrollTop: $(this.hash).offset().top - 5
    }, 1000);
    return false;
});

// User define function
function Scroll()
{
    var contentTop = [];
    var contentBottom = [];
    var winTop = $(window).scrollTop();
    var rangeTop = 200;
    var rangeBottom = 500;
    $('.navbar-collapse').find('.scroll a').each(function()
    {
        contentTop.push($($(this).attr('href')).offset().top);
        contentBottom.push($($(this).attr('href')).offset().top + $($(this).attr('href')).height());
    })
    $.each(contentTop, function(i)
    {
        if (winTop > contentTop[i] - rangeTop)
        {
            $('.navbar-collapse li.scroll').removeClass('active').eq(i).addClass('active');
        }
    })
};

Answer 1

当你传递this.hash作为选择器时，意思是，as example

$( '#about' );

这是一个 id 选择器。但是您没有包含 id="about" 的元素，因此没有选择任何元素。

两种可能的解决方案:或者你给所有需要的元素设置 id，或者你使用属性选择器:

$('[href="' + this.hash + '"]')