$(':target')在Internet Explorer 11中返回长度0

时间:2015-12-28 15:42:43

标签: javascript jquery internet-explorer-11

我正在尝试补偿网页中的锚点移动位置,因此它没有被固定的标题覆盖。

我用这个anwser解决了这个问题,它适用于除IE之外的每个浏览器。它只是在锚定运动后向上滚动几个像素。

代码如下:

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

现在,IE11中console.log的输出是:

{
    "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"
}

问题显然是“长度”:0,这意味着没有选择任何东西。为什么是这样? :目标选择器应该在IE11中正常工作,但jQuery不会抓住它。

请原谅我对jQuery和我的英语不好的无知。

1 个答案:

答案 0 :(得分:2)

我通过将名称属性旁边的 id 属性添加到锚点的目标来解决了这个问题,如下所示:

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

由于某种原因,name属性足以让锚点在每个浏览器中工作,但为了在Internet Explorer中使用jQuery获取它们,必须使用id属性创建锚点。

我讨厌IE。