"Skip Navigation" link not working in Google Chrome

Question

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

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.

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

Is it a bug of Chrome? Any workaround?

Answer 1

There is a known bug in Chrome (Webkit) that prevents you from scrolling twice to an anchor. So if you openen #anchor previously, scrolled up, and clicked again on a link reffering to #anchor, it won't work.

See: http://code.google.com/p/chromium/issues/detail?id=42511

I haven't tried it yet, but what about using javascript to clear the hash first? Like this:

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

Tested the following in Chrome, it works:

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

Answer 2

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.

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