title: Scroll with navigation bar - Uncaught TypeError: Cannot read property 'top' of undefined
body: <p>I'm getting an error in console.log of my website saying</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'top' of undefined</code></p>
  
  <p>If anyone can take a look at my code i've already got and give me a hand on finding the problem.</p>
  
  <p><strong>Current Code:</strong></p>
  
  <p><strong>HTML (Navigation bar)</strong></p>
  
  <pre><code>&lt;!-- Navigation buttons --&gt;
  &lt;div class="collapse navbar-collapse navbar-right"&gt;
       &lt;ul class="nav navbar-nav"&gt;
           &lt;li class="scroll active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li class="scroll"&gt;&lt;a href="#services"&gt;Solutions&lt;/a&gt;&lt;/li&gt;
           &lt;li class="scroll"&gt;&lt;a href="#features"&gt;Featured&lt;/a&gt;&lt;/li&gt;
           &lt;li class="scroll"&gt;&lt;a href="#customers"&gt;Customers&lt;/a&gt;&lt;/li&gt;
           &lt;li class="scroll"&gt;&lt;a href="#partners"&gt;Partners&lt;/a&gt;&lt;/li&gt;
           &lt;li class="scroll"&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
           &lt;li class="scroll"&gt;&lt;a href="#meet-team"&gt;Team&lt;/a&gt;&lt;/li&gt;
           &lt;li class="scroll"&gt;&lt;a href="#blog"&gt;Blog&lt;/a&gt;&lt;/li&gt; 
           &lt;li class="scroll"&gt;&lt;a href="#get-in-touch"&gt;Contact&lt;/a&gt;&lt;/li&gt;                        
       &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript and JQuery</strong></p>
  
  <pre><code>// 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 &gt; contentTop[i] - rangeTop)
          {
              $('.navbar-collapse li.scroll').removeClass('active').eq(i).addClass('active');
          }
      })
  };
  </code></pre>