Need Help debugging Javascript in IE9

JavaScript
1

I have this code that basically toggles a window to open and close from the top, in IE9 it simply refuses to open. Works across other browsers fine.

<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>

I’m using simple link to toggle open and close like so:

<a href="#" class="toggle">Open</a>

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;
    });

Does anybody know whats going on here?

2

Ah, nevermind, I did mis-read your code. Lemme look some more, I do this vanilla only.

I tend to get the destination like this
$(‘a’).click(function() {
var link = this.href; // may be slightly different per browser but we only care about the hash, right?
var destination = document.getElementById(link.hash.substr(1));

now destination points to an element with #theID, if it exists.

Okay no, I still don’t see how
scrollTop: $(href).offset().top
can work in other browsers: href is an attribute, you set $(href) to the attribute, not some-element-whose-ID-matches-the-hash-of-the-attribute, and an attribute can’t have an offset().top right? Are we supposed to scroll to the position of $(this) (the anchor) instead?

But the whole scrolling thing confuses me since this is a toggle opening/closing something and not a link clicked to scroll to a destination.