我正在尝试补偿网页中的锚点移动位置,因此它没有被固定的标题覆盖。
我用这个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和我的英语不好的无知。
答案 0 :(得分:2)
我通过将名称属性旁边的 id 属性添加到锚点的目标来解决了这个问题,如下所示:
<a class="anchor" name="condiciones" id="condiciones"></a>
由于某种原因,name属性足以让锚点在每个浏览器中工作,但为了在Internet Explorer中使用jQuery获取它们,必须使用id属性创建锚点。
我讨厌IE。