“跳过导航"链接在谷歌浏览器中不起作用 [英] "Skip Navigation" link not working in Google Chrome

问题描述

我按照 此页面 制作跳过导航"链接，但是它在铬 (5.0.375.127).

I follow this page to make a "Skip Navigation" link, however it is not working in Chrome (5.0.375.127).

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

When I tab and enter the link, it scroll to the content, but when I continue to tab, it starts from the top but not start from the content.

该页面的跳过跳过导航"链接在 Chrome 中也不起作用.

That page's skip "Skip Navigation" link is not working in Chrome either.

是Chrome的bug吗?有什么解决方法吗?

Is it a bug of Chrome? Any workaround?

推荐答案

我明白了.目标应该是一个可以聚焦的标签，比如链接，如果不是，我的情况是一个div，应该将目标的tabindex设置为-1.

I get it. The target should be a tag that can be focused, like a link, if not, which is my case a div, should set tabindex of the target as -1.

我的 jQuery 解决方案，带有 ScrollTo 插件，是:

My jQuery solution, with ScrollTo plug-in, is:

$("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();
    });

这篇关于“跳过导航"链接在谷歌浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！