“跳过导航”链接无法在谷歌浏览器工作

Question

我关注this page做出“跳过导航”链接，但它不适用于Chrome（5.0.375.127）。

当我标签并输入链接时，它会滚动到内容，但当我继续选项卡时，它从顶部开始，但不是从内容开始。

该页面的跳过“跳过导航”链接在Chrome中也不起作用。

这是Chrome的错误吗？任何解决方法？

Answer 1

我明白了。目标应该是一个可以聚焦的标签，如果没有，就是我的情况，应该将target的tabindex设置为-1。

我的jQuery的解决方案，ScrollTo plug-in是：

$("a[href^='#']") 
    .click(function(evt){ 
     var j = $(evt.currentTarget); 
     var anchorTarget = j.attr("href"); 
     $("body") 
      .scrollTo(anchorTarget, 500, { 
       onAfter:function() { 
        window.location.hash = anchorTarget.substr(1); 
        $(anchorTarget).attr("tabindex",-1).focus(); 
       } 
      }); 

     evt.preventDefault(); 
    }); 

Answer 2

Chrome（Webkit）中存在一个已知的错误，它会阻止您向锚点滚动两次。 因此，如果您以前开启#anchor，向上滚动，并再次点击一个链接，并重新尝试#anchor，它将无法工作。

请参见：http://code.google.com/p/chromium/issues/detail?id=42511

我还没有尝试过，但如何使用JavaScript首先清除哈希什么？ 像这样：

<a href="#content" onclick="location.hash='';">Scroll to content</a> 

测试在Chrome下，它的工作原理：

<a href="#content" onclick="this.focus();">Scroll and tab</a> 

Answer 3

我可以证实，安迪李的回答工作，但我并不需要的东西scrollTo。我也加入了一个钩子，这样如果你正在加载一个已经应用了锚链接的页面，就会给出合适的焦点。

我的版本是：

// Fixes anchor focus in Chrome/Safari/IE by setting the tabindex of the 
// target container to -1 on click/enter 
// see -> http://stackoverflow.com/questions/3572843/skip-navigation-link-not-working-in-google-chrome/6188217#6188217 

$("a[href^='#']").click(function(evt){ 
    var anchortarget = $(this).attr("href"); 
    $(anchortarget).attr("tabindex", -1).focus(); 
}); 

// Fixes anchor focus in Chrome/Safari/IE by setting the tabindex of the 
// target container to -1 on page load 
if (window.location.hash) { 
    $(window.location.hash).attr("tabindex", -1).focus(); 
} 

Answer 4

我相信这是最正确的按Knu在回答这个属性chrome bug #37221到Skip links not working in Chrome。

我不同意Javascript解决方法适用于长期。

Answer 5

这是我的解决方法。 它使键盘跳过导航链接到其页面上的任何元素ID。

<a href="#" onclick="goToId('target_anchor_id'); return false;">click to skip</a> 
.... 
<h3 id="target_anchor_id"> 

链接的onclick事件处理程序在这里。

function goToId(id) { 
    if (id) { 
     //make temporary 'a' element just before the anchor destination 
     var id_tmp = "___" + id; 
     var e = $("#" + id); 
     var e_tmp = $("#" + id_tmp); 

     if (e_tmp.length == 0) { 
      e.prepend("<a href='#' onclick='return false;' id='"+id_tmp+"'></a>"); 
      e_tmp = $("#" + id_tmp); 
     } else { 
      e_tmp.attr("href","#"); 
     } 

     // go give the focus to my temporary 'a' element 
     window.location.href = '#' + id_tmp; 

     // make the temporary focus invisible by removing 'href' attribute. 
     e_tmp.removeAttr("href"); 
    } 
} 

以下是我的假设。

1. 只有a链接href属性可能是键盘导航锚链接的正确目的地。
2. 即使我从重点a链接删除href属性，浏览器仍然会记住键盘导航的焦点位置，同时它不会显示在屏幕上，聚焦标记了。

我写它为弹出页面跳过导航不可能被滚动。 我希望它甚至可以用于屏幕阅读器。

Answer 6

我知道这是一个古老的问题，但我终于在搜索了几个小时后偶然发现了它。我还没有找到一个非JS的解决方案，虽然这个问题在Chrome中被标记为固定，但它仍然表现出相同的行为。除此之外，我使用jQuery。我没有使用内联脚本，而是使用了不显眼的事件监听器。

的HTML：

<div id="skiptocontent"> 
    <a href="#mainContent" id="skipper">Skip to Main Content</a> 
</div> 

<div id="mainContent"></div> 

jQuery的：

$(document).ready(function() { 
    $("#skipper").click(function() { 
     $('#mainContent').attr('tabIndex', -1).focus(); 
    }); 
}); 

我也隐藏链接，除非它获得焦点从键盘。这样，只有键盘用户和屏幕阅读器才会知道链接在那里。使用CSS3，你可以确保如果用户快速通过它，它会变得简单可见。

的CSS：

#skiptocontent a { 
    position: absolute; 
    top:-40px; 
    left:0px; 
    background:transparent; 
    -webkit-transition: top 1s ease-out, background 1s linear; 
    transition: top 1s ease-out, background 1s linear; 
    z-index: 100 
} 
#skiptocontent a:focus { 
    position:absolute; 
    left:0px; 
    top:0px; 
    background:#F1B82D; 
    -webkit-transition: top .1s ease-in, background .5s linear; 
    transition: top .1s ease-in, background .5s linear 
} 

对于演示，您可以查看fiddle。如果有人有办法使用JavaScript，我很乐意听到它。如果它需要js，我认为解决方案不是真正可访问的。

Answer 7

这里是没有jQuery的同样的解决方案。

添加页面的锚：

<div class="skip-nav"> 
    <a href="#content">Skip to content</a> 
</div> 

链接到内容：

<section id="content" tabindex="-1"> 
    Lorem ipsum... 
</section> 

我jsfiddle