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.

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>
I'm using simple link to toggle open and close like so:
HTML Code:
<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:

Code:
 $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
Does anybody know whats going on here?