Question

I just don’t know how to solve this altough it’s probably fairly simple.
I wrote a custom scroll function that simply scrolls the entire page to a certain position of an element on the page.

function scroll(selector, animate, viewOffset) {

        pageOffset = selector.offset();
        scrollPos = pageOffset.top - viewOffset;

        if ( animate ) {
            $('html, body').animate({ scrollTop : scrollPos + 'px' }, {
                duration: '500',
                easing: 'easeInOutExpo'
            });
        } else {
            $('html, body').scrollTop( scrollPos );
        }

    }

So I call the function like that … scroll($('#something'), true, 30);
This function works really fine, however if a selector is passed along that doesn’t exist the function of course throws the following error …

pageOffset = selector.offset();
scrollPos = pageOffset.top - viewOffset;

Uncaught TypeError: Cannot read property ‘top’ of null

If that error occurs none of my JS does work anymore.

How can I solve that problem so when I pass along a none existing selector the function doesn’t throw an error or just doesn’t get fired?

Any ideas, thank you!

Answer 1

use a try/catch block

try {
 pageOffset = selector.offset();
scrollPos = pageOffset.top - viewOffset;
} catch(e) {
  //error objects typically contain a .name & .message property
  var name = "";
  if (e.hasOwnProperty("name") ) {
    name = e.name; //super-defensive 
  }

  var message = "";
  if (e.hasOwnProperty("message") ) {
    message = e.message; //super-defensive 
  }

  console.log("Error occurred - " + name + " [" + message + "]");
}