最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - uncaught TypeError: Cannot read property "top" of null - Stack Overflow

programmeradmin1浏览0评论

I got a pretty annoying javascript error. The world famous:

uncaught TypeError: Cannot read property "top" of null

Here is the 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: 
$.fx.speeds._default = 600;
});

try{Typekit.load()}catch(e){}

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:

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

Uncaught TypeError: Cannot read property 'top' of null

It's line 23 in the code.

That's it. Could you give me a hint on how to solve this problem? Thank you!

I got a pretty annoying javascript error. The world famous:

uncaught TypeError: Cannot read property "top" of null

Here is the 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 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:

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

Uncaught TypeError: Cannot read property 'top' of null

It's line 23 in the code.

That's it. Could you give me a hint on how to solve this problem? Thank you!

Share Improve this question edited Jul 13, 2014 at 22:54 Nisse Engström 4,76123 gold badges28 silver badges44 bronze badges asked Apr 11, 2012 at 8:30 Der KevDer Kev 691 gold badge1 silver badge2 bronze badges 6
  • 1 So, offset = target.offset() returns null - I believe only you can track down the actual cause using your full JS code. – Alexander Pavlov Commented Apr 11, 2012 at 8:34
  • thats the full JS. except the jquery mini.js -> code.jquery./jquery-1.7.2.min.js – Der Kev Commented Apr 11, 2012 at 8:43
  • This code definitely needs some embedding HTML against which it is run. Have you tried debugging it, e.g. using Chrome Developer Tools? – Alexander Pavlov Commented Apr 11, 2012 at 9:03
  • yes. used CDT but cant figure it out :/. URL is: pixelpizza.de/hire4/hire maybe you could be so kind and have a look over it? :) handler.js is the broken script – Der Kev Commented Apr 11, 2012 at 9:44
  • 2 OK, so you are trying to find an HTML element using the selector "#hire4/hire/" (which is actually a URL) and grab its offset in the page. Looks smelly... – Alexander Pavlov Commented Apr 11, 2012 at 11:35
 |  Show 1 more ment

2 Answers 2

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

I believe this must have something to do with line 2, target should be null when error occurs

According to jQuery source, jQuery.fn.offset only returns null if:

  1. the first element in the set doesn't exist (empty set) or
  2. its ownerDocument is falsy (I don't know when that would happen, sorry).

The first option seems more likely, so you should check if target.length > 0 before calling target.offset() and handle the alternative.

发布评论

评论列表(0)

  1. 暂无评论