Question

I have everything working perfectly on my site, but for some reason, I get an error message in console whenever I click a link anywhere on my site. The error has to do with this line of coding here:

jQuery(function($){
  $('.navbar a, .scroll a, .smoothscroll a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 850,'easeInOutExpo');

    event.preventDefault();
  });
});

And the error I am getting is this:

“SCRIPT5007: Unable to get value of the property ‘top’: object is null or undefined
custom.min.js, line 6 character 197”

The exact code it is highlighting is this part of the above code:

$('html, body').stop().animate({
  scrollTop: $($anchor.attr('href')).offset().top
}, 850,'easeInOutExpo')

All I know is that when I remove the above code, my scroll-to links stop working on pages such as these:

http://www.northtownsremodeling.com/things-to-know.php

You can see the popup error happen and stay in the console easily by going to a page with a filter like this:

http://www.northtownsremodeling.com/bathroom/

And clicking one of the filter buttons.

Ultimately, I am trying to make it so my scroll-to setting still works, but not have that error come up anymore. I made this script a long time ago, and I’m really confused as to what could be causing this error when everything is functioning perfectly otherwise?

Thanks!

Answer 1

The problem you have is that the code which gives error is for scrolling to predefined div, and you have its id (of target div) in hashtag of url (href attribute of clicked link).

This is problem when you click “normal” link, because it does not contain hashtag which is id of element existing on page, so $($anchor.attr('href')) gives empty array, because there is no such element which can be selected with i.e. $("http://www.northtownsremodeling.com/alliances.php"), so, in that case offset() is undefined and gives you an error.

To fix this, replace:

$('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top
}, 850,'easeInOutExpo');

with:

// get target div to scroll to
var target = $($anchor.attr('href'));
// if target is valid, scroll to
if(target && target.offset()){
    $('html, body').stop().animate({
        scrollTop: target.offset().top
    }, 850,'easeInOutExpo');
}