Crossbrowser skip to content link

This js solves problem happens while implementing 'skip to content' feature in webkit (Issue 37721).
(function($, undefined) {
$(function() {
var $skipToContentBlock = $('.js-skip-link');
var hideSkipLinksTimeout = undefined;
if(!$skipToContentBlock.length) return;
/* fix webkit bug 17450 */
if(navigator.userAgent.toLowerCase().indexOf('webkit') != -1) {
if(window.location.hash) {
var anchor = $(window.location.hash);
if(anchor.length) {
setTimeout(function() {
anchor.attr('tabindex', 0);
$(window).scrollTop(anchor.offset().top);
anchor.focus();
}, 0)
}
}
$skipToContentBlock.find('a').on('click', function() {
var anchor = $($(this).attr('href'));
if(anchor.length) {
anchor.attr('tabindex', 0);
$(window).scrollTop(anchor.offset().top);
anchor.focus();
}
});
}
$skipToContentBlock.on('focusin', function(){
if(hideSkipLinksTimeout) {
clearTimeout(hideSkipLinksTimeout);
}
$(this).css({height: 'auto'});
}).on('focusout', function(e) {
var $this = $(this);
hideSkipLinksTimeout = setTimeout(function() {
$this.css({height: 0});
}, 200);
});
});
})(jQuery)
Links:
- http://www.netmagazine.com/news/webkit-scuppers-skip-content-links-121741
- http://stackoverflow.com/questions/2074347/focus-not-working-in-safari-or-chrome
- http://www.refinedpractice.com/examples/skiplink-redux.html
Licensed under CC BY-SA 3.0