IE9 Jquery slider not opening

Question

I need help debugging slider in IE9. It does not open the slider, here is the javascript code.

<script>
var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});
// yeah let's do vanilla JS just for fun :P

var toggle = document.getElementsByClassName('toggle');
var slider = document.querySelector('.slider');

for(var i = 0; i < toggle.length; i++) {
    toggle[i].addEventListener('click', toggleSlider, false);
}



function toggleSlider(){
    if (slider.classList.contains('opened')) {
        slider.classList.remove('opened');
        slider.classList.add('closed');
    } else {
        slider.classList.remove('closed');
        slider.classList.add('opened');
    }
}
</script>

When using IE develop tools IE generates this error "Unable to get value of the property 'top' : object is null or undefined"

Then it shows the possible area of where the error is occuring:

  $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

Any ideas whats going on here?

Answer 1

Your problem is in this line:

var href = $.attr(this, 'href');

This will not work because its trying to set 'this' attribute of the jquery object to href and that is not going to work for several reasons. What you probably want to do is something like this:

var href = $(".selector").attr('href');

Answer 2

Try to use:

var href = $(this).attr('href');

instead of:

var href = $.attr(this, 'href');

inside the click handler of your anchor.