$(':target') returns length 0 in Internet Explorer 11

Question

I'm trying to compensate the anchor movement position in a web page so it's not covered by a fixed header.

I solved the problem with this anwser, and it works fine for every browser except IE. It just scrolls up a few pixels after the anchor movement.

The code is as follow:

(function($, window) {
    var adjustAnchor = function() {

        var $anchor = $(':target'),
                    fixedElementHeight = 160;
        console.log("Anchor: "+ JSON.stringify($anchor));

        if ($anchor.length > 0) {
            $('html, body')
                .stop()
                .animate({
                    scrollTop: $anchor.offset().top - fixedElementHeight
                }, 200);
        }
    };

    $(window).on('hashchange load', function() {
        adjustAnchor();
    });

})(jQuery, window);

Now, the output of the console.log in IE11 is this:

{
    "length": 0,
    "prevObject": {
        "0": {
            "__IE_DEVTOOLBAR_CONSOLE_EVAL_ERROR": false,
            "_html5shiv": 1,
            "jQuery1111049273906621767055": 4
        },
        "context": {
            "__IE_DEVTOOLBAR_CONSOLE_EVAL_ERROR": false,
            "_html5shiv": 1,
            "jQuery1111049273906621767055": 4
        },
        "length": 1
    },
    "context": {
        "__IE_DEVTOOLBAR_CONSOLE_EVAL_ERROR": false,
        "_html5shiv": 1,
        "jQuery1111049273906621767055": 4
    },
    "selector": ":target"
}

The problem is obviosly the "length": 0, which means is not selecting anything. Why is this? The :target selector should work fine in IE11 but jQuery doesn't grab it.

Excuse my ignorance in jQuery and my bad english.

Could you change `var $anchor = $(':target'),` to `var $anchor = $(window.location.hash),`? — epascarello, Dec 28 '15 at 15:52
@epascarello then the scroll up doesn't work because $anchor wouldn't have a length attribute. This is what $anchor has now `{"context":{"jQuery111107266217162832618":4},"selector":"#condiciones"}` — David Prieto, Dec 28 '15 at 16:11

score 2 · Accepted Answer · answered Dec 30 '15 at 15:31

I solved the problem by adding id attributes beside the name attributes to the target of the anchors, like this:

<a class="anchor" name="condiciones" id="condiciones"></a>

For some reason, the name attribute is enough for anchors to work in every browser, but in order to grab them with jQuery in Internet Explorer, anchors must be made with id attribute.

I hate IE.

$(':target') returns length 0 in Internet Explorer 11

1 Answers1