uncaught TypeError: Kann Eigenschaft "top" von null nicht lesen

Question

Ich habe eine ziemlich nervige Javascript-Fehler. Die weltberühmte:

uncaught TypeError: Cannot read property "top" of null

Hier ist der 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 > 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 > 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 > 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 < 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) < (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) < 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){} 

Sorry für diese lange Monster, aber ich dachte, es könnte nützlich sein für Sie die ganze Sache zu sehen. Die Fehlerwarnung zeigt in diesem Teil bis:

// And move the element 
     if(offset.top) { 

Uncaught TypeError: Cannot read property 'top' of null

Es ist die Leitung 23 in den Code.

Das ist es. Können Sie mir einen Hinweis geben, wie Sie dieses Problem lösen können? Vielen Dank!

Answer 1

var href = typeof url == 'string' ? url : $(this).attr('href'), 
target = $(href), //line 2 
offset = target.offset(), //line 3 

Ich glaube, das etwas mit line 2 zu tun haben muss, targetnull sein sollte, wenn Fehler

Answer 2

Nach jQuery Quelle auftritt, gibt jQuery.fn.offset nur null wenn:

1. das erste Element in der Satz existiert nicht (leerer Satz) oder
2. sein ownerDocument ist falsy (ich weiß nicht wh Das würde passieren, sorry).

Die erste Option scheint wahrscheinlicher, so dass Sie, wenn target.length > 0 vor dem Aufruf target.offset() und behandeln die Alternative überprüfen sollten.