I am trying to compensate for the position of the anchor on a web page so that it is 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 a few pixels after moving the anchor.
The code is as follows:
(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 in 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 truncated by "length": 0, which means that nothing is selected. Why is this? Selector: should work fine in IE11, but jQuery does not capture it.
Sorry my ignorance in jQuery and my bad english.
source
share