“跳过导航”链接在 Google Chrome 中不起作用

Question

我按照此页面创建“跳过导航”链接，但它在 Chrome (5.0.0) 中不起作用。 375.127）。

当我按 Tab 键并输入链接时，它会滚动到内容，但是当我继续按 Tab 键时，它会从顶部开始，而不是从内容开始。

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

这是Chrome的一个bug吗？有什么解决办法吗？

Answer 1

我可以确认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 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

我得到它。目标应该是一个可以聚焦的标签，比如链接，如果不是，我的例子是一个div，应该将目标的tabindex设置为-1。

我的 jQuery 解决方案（使用 ScrollTo 插件）是：

$("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 4

我认为将此归因于 chrome bug #37221 按照 Knu 的答案 跳过在 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");
    }
}

以下是我的假设。

1. 只有具有 href 属性的 链接才能成为键盘导航锚链接的正确目标。
2. 即使我从具有焦点的 a 链接中删除 href 属性，浏览器仍然会记住键盘导航的焦点位置，而不会在屏幕上显示任何焦点标记更多的。

我编写它是为了弹出页面跳过导航，该导航不太可能滚动。
我希望它甚至适用于屏幕阅读器。

Answer 7

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

添加页面锚点：

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

链接到内容：

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

我的 jsfiddle