offset().top is null or not an object error in JQuery

Question

I have the live demo of the code here: LIVE DEMO

What I am looking to do is when the 1 box is clicked it should scroll to the first section, when the 2 box is clicked it should scroll to the second section and so forth. But when I click on the numbers, I receive the following error:

offset().top is null or not an object

My JQuery looks like:

$(function() {
    $(".pointto").mouseover(function() {
        $(this).addClass("Hover");
    });
    $(".pointto").mouseout(function() {
        $(this).removeClass("Hover").removeClass("Pressed");
    });
    $(".pointto").mousedown(function() {
        $(this).addClass("Pressed");
    });
    $(".pointto").mouseup(function() {
        $(this).removeClass("Pressed");
    });
$(document).on('click', '.Hover, .Pressed, .pointto', function() { 
    var nn = $(this).attr('id').replace('s', '');
    alert('a[name="'+nn+'"]'); //clicking on 1 gives me <a name="01">
    t = $('a[name="'+nn+'"]').offset().top; //t = $('a[name="'+nn+'"]').offset().top;
    $('body,html').animate({scrollTop:t},800);
});
});

HTML sample:

<a id="s01" class="pointto">1</a> //clickable link
...
...
...
<a name="01">1. About</a> //target

Any idea how to resolve that error?

Update: [RESOLVED]

$(document).on('click', '.Hover, .Pressed, .pointto', function() { 
    var nn = $(this).attr('id').replace('s', '');
    alert('a[name="'+nn+'"]');
    t = $('a[name="'+nn+'"]').offset().top; //t = $('a[name="'+nn+'"]').offset().top;
    $('body,html').animate({scrollTop:t},800);
});

Have you tried this t = $('a[name="'+nn+'"]')[0].offset().top; ? — Jeff Noel
– Jeff Noel, Commented Jun 20, 2013 at 20:08
In your dev console, what do you get when you enter $('a[name="'+nn+'"]'); I think the selector can't find an element — Simon
– Simon, Commented Jun 20, 2013 at 20:08
@Ghillied If that edit is done then I receive an missing ')' error — Si8
– Si8, Commented Jun 20, 2013 at 20:10

Snuffleupagus · Accepted Answer · 2013-06-20 20:12:38Z

2

Your selector is returning empty. Your target elements have names such as "1", "2", etc. and your selector is trying to find "s01", "s02" etc.

Your code should be var nn = $(this).attr('id').replace('s0', ''); or rename the elements you want to scroll to appropriately.

answered Jun 20, 2013 at 20:12

Snuffleupagus

6,8053 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Montagne · Accepted Answer · 2013-06-20 20:16:05Z

1

Based on your posted html, this is what you have:

var nn = $(this).attr('id').replace('a', '');

Since the id is s01, nn is now set to s01, since there are no "a"s in the id, nothing is replaced

t = $('a[name="'+nn+'"]').offset().top;

You then look for an a with a name of s01. Your anchor does not have this name, your anchor is named 1. The offset of nothing is null, so you then try to take the top property of null.

answered Jun 20, 2013 at 20:16

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

1 Comment

James Montagne Over a year ago

your selector was fine before, your name value was just wrong.

Karl-André Gagnon · Accepted Answer · 2013-06-20 20:20:36Z

1

Your selector when doing $('<a name="'+nn+'">') is wrong. it should be :

$('a[name="'+nn+'"]')

answered Jun 20, 2013 at 20:20

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Collectives™ on Stack Overflow

offset().top is null or not an object error in JQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related