title: uncaught TypeError: Cannot read property "top" of null
body: <p>I got a pretty annoying javascript error. The world famous: </p>
  
  <blockquote>
    <p>uncaught TypeError: Cannot read property "top" of null</p>
  </blockquote>
  
  <p>Here is the code:</p>
  
  <pre><code>$(function() {
  
  var setTitle = function(title, href) {
          title = 'Derp: ' + title;
          href = href || '';
  
          history.pushState({id: href}, title, href.replace('#', '/'));
          document.title = title;
      },
      scroll = function(url, speed) {
  
          var href = typeof url == 'string' ? url : $(this).attr('href'),
              target = $(href),
              offset = target.offset(),
              title = target.find('h1').text();
  
          if(typeof url == 'number') {
              target = [{id:''}];
              offset = {top: url};
          }
  
          //  And move the element
          if(offset.top) {
              //  Set the new URL and title
              setTitle(title, href);
  
              //  Make sure we're not moving the contact panel
              if(target[0].id != 'contact') {
                  $('html, body').animate({scrollTop: offset.top}, speed);
              }
          }
  
          return false;
      };
  
  //  Handle existing URL fragments on load
  if(location.pathname.length &gt; 1) {
      scroll(location.pathname.replace('/', '#'), 0);
  }
  
  $('a#logo').click(function() {
      $('html,body').animate({scrollTop: 0});
      return false;
  });
  
  //  Handle internal link clicks
  $('a[href^=#]:not(#logo)').click(scroll);
  
  
  //  Close the "Get In Touch" box
  var box = $('#contact'),
      moveBox = function() {
          var closing = $(this).attr('class') == 'close',
              amount = closing ? -(box.height() + 20) : 0,
              cb = closing ? '' : function() { box.animate({marginTop: -10}, 150); };
  
          box.animate({marginTop: amount}, cb);
      };
  
  box.css('margin-top', -(box.height() + 20));
  $('#contact a.close, #get-in-touch').click(moveBox);
  
  
  //  Nasty little fix for vertical centering
  $('.vertical').each(function() {
      $(this).css('margin-top', -($(this).height() / 2));
  });
  
  
  //  Work panels
  var parent = $('#work'),
      panels = parent.children('div');
  
  panels.each(function() {
      $(this).css('width', 100 / panels.length + '%');
  })
  
  parent.css('width', (panels.length * 100) + '%');
  
  
  //  Bind the keyboards
  $(document).keyup(function(e) {
      var actions = {
          //  Left
          37: function() {
              var prev = panels.filter('.active').prev().not('small');
  
              if(prev.length &gt; 0) {
                  prev.siblings().removeClass('active');
  
                  setTitle(prev.find('h1').text(), prev[0].id);
  
                  setTimeout(function() {
                      prev.addClass('active');
                  }, 250);
  
                  parent.animate({left: '+=100%'}).css('background-color', '#' + prev.attr('data-background'));
              }
          },
  
          //  Right
          39: function() {
              var next = panels.filter('.active').next();
  
              if(next.length &gt; 0) {
                  next.siblings().removeClass('active');
  
                  setTitle(next.find('h1').text(), next[0].id);
  
                  setTimeout(function() {
                      next.addClass('active');
                  }, 250);
  
                  parent.animate({left: '-=100%'}).css('background-color', '#' + next.attr('data-background'));
              }
          },
  
          //  Down
          40: function() {
              var w = $(window),
                  height = w.height() * panels.children('div').length,
                  h = w.height() + w.scrollTop();
  
              if(h &lt; height) {
                  scroll(h);
              }
          },
  
          //  Up
          38: function() {
              var w = $(window);
              $('html,body').animate({scrollTop: w.scrollTop() - w.height()});
          }
      };
  
      //  Call a function based on keycode
      if(actions[e.which]) {
          actions[e.which]();
      }
  
      e.preventDefault();
      return false;
  });
  
  
  //  Fix crazy resize bugs
  $(window).resize(function() {
  
      var m = $(this),
          h = m.height(),
          s = m.scrollTop();
  
      if((h - s) &lt; (h / 2)) {
          m.scrollTop(h);
      }
  
      //$('html,body').animate({scrollTop: s});
  });
  
  
  //  slideshow
  var woof = function() {
          var slides = $('#molly li'),
              active = slides.filter('.active');
  
          if(!active.length) {
              active = slides.last();
          }
  
          active.addClass('active');
  
          var next = active.next().length ? active.next() : slides.first();
  
          next.css('opacity', 0).addClass('active').animate({opacity: 1}, function() {
              active.removeClass('active last-active');
          });
      };
  
  setInterval(woof, 3000);
  
  
  //  easing
  $.easing.swing = function(v,i,s,u,a,l) {
      if((i /= a / 2) &lt; 1) {
          return u / 2 * (Math.pow(i, 3)) + s;
      }
  
      return u / 2 * ((i -= 2) * i * i + 2) + s;
  };
  
  //  Change the default .animate() time: http://forr.st/~PG0
  $.fx.speeds._default = 600;
  });
  
  try{Typekit.load()}catch(e){}
  </code></pre>
  
  <p>Sorry for this long monster but I thought it could be useful for you to see the whole thing. The Error warning shows up in this part:</p>
  
  <pre><code>//  And move the element
          if(offset.top) {
  </code></pre>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'top' of null</p>
  </blockquote>
  
  <p>It's line 23 in the code.</p>
  
  <p>That's it. Could you give me a hint on how to solve this problem?
  Thank you!</p>