Question

我按this page制作了“跳过导航”链接，但在Chrome（5.0.375.127）中无效。

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

该页面的跳过“跳过导航”链接在Chrome中无效。

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

Answer 1

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 2

我明白了。目标应该是一个可以聚焦的标签，如链接，如果不是，我的情况是div，应该将目标的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 3

我可以确认Andy Li的答案有效，但我不需要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

我认为在chrome bug #37221的答案中根据Knu将此归因于Skip links not working in Chrome是最正确的。

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

Answer 5

我知道这是一个老问题，但我终于在搜索了几个小时后偶然发现了它。我仍然没有找到一个非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 6

这是我的解决方法。它使键盘跳过导航链接到其页面上的任何元素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");
    }
}

以下是我的假设。

只有a与href属性的链接才能成为键盘导航的固定链接的正确目的地。
即使我从焦点href链接中删除a属性，浏览器仍会记住键盘导航的焦点位置，而不会再在屏幕上显示焦点标记。< / LI>
我为弹出页面跳过导航编写了它，不太可能滚动。我希望它甚至适用于屏幕阅读器。

Answer 7

这里没有jQuery的解决方案。

添加页面锚：

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

链接到内容：

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

我的jsfiddle

“跳过导航”链接无法在Google Chrome中使用

7 个答案: