Getting TypeError on Animate ScrollTo

Question

I'm getting a TypeError and can't figure out why.

jQuery:

    var text_to_insert = '';
    for (var i=0; i<tunnelObject.length; i++) {
        var target = tunnelObject[i].t.name;
        text_to_insert += '<a href="javascript:void(0)" class="special_anchor" id="' + target + '">' + target + '</a>';
    }

    $('#list').append(text_to_insert);

    $('#list').on('click', 'a.special_anchor', function() {
        var id = this.id;
        console.log(id);

        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 1200);
    })

HTML:

    <td class="value_width_long" id="tunnels_listing"><span id="list"/></td>

If i change the $(id).offset().top to say $('#myDiv').offset().top it will scroll there just fine. But with the id, it's raising this on the console:

TypeError: undefined is not an object (evaluating '$(id).offset().top')

Any ideas?

Edit:

The HTML that should be scrolled to, looks like this:

    <!-- Tunnels Section -->
     <div class="tunnels" id="tunnels">
         <!-- Tunnel Header -->
         <div class="div_tunnel_header" id="div_tunnel_header">
            <p class="main_subject first_subject">$_('BOVPN Tunnel')</p>
            <p class="scroll_top btn-link">$_('Top')</p>
            <table class="table table-bordered table-condensed" id="tunnel_header_table">
                <tr>
                    <th class="label_width_long">$_('Name')</th>
                    <td class="tnl_name value_width_long"></td>
                </tr>
                <tr>
                    <th class="label_width_long">$_('Gateway Name')</th>
                    <td class="gateway_name value_width_long"></td>
                </tr>
            </table>
         </div>
         ...

Because this section can be cloned up x amount of times. The id="div_tunnel_header" is changed via jQuery to a unique id that matches the id from the anchor link from text_to_insert.

Edit Part 2:

I have a working copy on jsFiddle. On jsFiddle, it works, on my localhost, it doesn't work. But I still get this error:

    TypeError: undefined is not an object (evaluating '$(this.id).offset().top')

Here is the jsFiddle: http://jsfiddle.net/YtJcL/988/

Edit Part 3:

Edit part 2 works when array is being used, copied and pasted to my localhost. This edit updates the jsFiddle to use objects instead of an array. It no longer scrolls. Will get same TypeError as Edit part 2.

Here is the jsFiddle: http://jsfiddle.net/YtJcL/989/

Answer 1

please replace this line:

var id = this.id;

with this line:

var element = $(this);

and instead using 'id' variable, use element - such as:

$(id).offset().top // error - id is not a valid selector without # directive
element.offset().top