TypeError: $(...).offset(...) is undefined

Question

I'm getting this error

TypeError: $(...).offset(...) is undefined

with the arrow pointing to the $.

I've looked at the questions that popped up when I typed this error into the title, but I didn't get a solution.

Here is my jquery

$(document).ready(function () {
if(window.location.href.indexOf("#") > -1)
{
    var pieces = window.location.href.split(/[\s_]+/);
    var section = pieces[pieces.length-1];
    var element_to_scroll_to = $('#' + section);
    var navbar_height = parseInt($('.navbar').css('height').replace('px', ''));
    animate_scroll(element_to_scroll_to, navbar_height, 25);
}
});

function animate_scroll (element, variable, offset) {
    $('html, body').stop().animate({
        scrollTop: $(element).offset().top - variable - offset

    }, 600);

}

and this is the order my js files are

{{ HTML::script('js/jquery-1.10.2.js') }}
{{ HTML::script('js/jquery-ui.js') }}
{{ HTML::script('js/bootstrap.min.js') }}
{{ HTML::script('js/wow.min.js') }}
{{ HTML::script('js/jquery.superslides.min.js') }}
{{ HTML::script('js/slick.min.js') }}
{{ HTML::script('js/modernizr.custom.js') }}
{{ HTML::script('js/classie.js') }}
{{ HTML::script('js/elastic_grid.min.js') }}
{{ HTML::script('js/webkrunch_portfolio.js') }}
{{ HTML::script('js/main.js') }}

Answer 1

So, its quite easy to break down whats happening here.

You are utilizing that function called animate_scroll and calling the parameter element as element_to_scroll_to.

With this in mind, element_to_scroll_to is already calling jQuery via:

$('#' + section);

So when animate_scroll() is called, its seeing this:

$('html, body').stop().animate({
    scrollTop: $($('#' + section)).offset().top - variable - offset
}, 600);
// Notice the dual call of jQuery

You should be able to simply call element instead of redefining jQuery again, like so:

$('html, body').stop().animate({
    scrollTop: element.offset().top - variable - offset
}, 600);

EDIT:

So, if you are still getting an error, the problem lies further back. Here are the steps I would take to identify the issue.

if(window.location.href.indexOf("#") > -1) // Perhaps this is not returning > -1
{
    var pieces = window.location.href.split(/[\s_]+/); // Perhaps this is not creating an array to pull from
    var section = pieces[pieces.length-1]; // Perhaps the last element doesn't exist in the first place based on the above tests
    var element_to_scroll_to = $('#' + section);
    var navbar_height = parseInt($('.navbar').css('height').replace('px', ''));
    animate_scroll(element_to_scroll_to, navbar_height, 25);

    console.log(pieces);
    console.log(section);
    console.log(element_to_scroll_to);
}

}

To test the above, I would run simple console tests such as:

console.log(pieces);
console.log(section);
console.log(element_to_scroll_to);

view the console after adding those at the end of your if statement and it should clarify further which section is undefined.