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') }}
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.
I think that you should make a test to the element scrolling.
Your code become like
$(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); if(element_to_scroll_to.length) { 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); }
