Ссылка "Пропустить навигацию" не работает в Google Chrome

Question

Я следую этой странице , чтобы создать ссылку «Пропустить навигацию», однако она не работает в Chrome (5.0.375.127).

Когда я вкладываю и вводю ссылку,выделите содержимое, но когда я продолжаю вкладку, оно начинается сверху, но не начинается с содержимого.

Эта страница с пропуском "Skip Navigation" не работает в Chrome.

Это ошибка Chrome?Любое решение?

Answer 1

Я знаю, что это старый вопрос, но я, наконец, наткнулся на него сегодня после нескольких часов поиска.Я до сих пор не нашел решения, не относящегося к 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
}

Для демонстрации вы можете просмотреть скрипку .Если у кого-то есть способ обойтись использованием javascript, я бы с удовольствием это услышал.Я не думаю, что решение действительно доступно, если оно требует js.

Answer 2

Я считаю, что наиболее правильно приписать это ошибка Chrome # 37221 согласно Кну в ответе Пропускать ссылки, не работающие в Chrome .

Я не согласен с тем, что обходные пути Javascript подходят для длительного срока.

Answer 3

Я могу подтвердить, что ответ Энди Ли работает, но мне не нужны были прокрутки. Я также добавил в ловушку, чтобы, если вы загружаете страницу с уже примененной якорной ссылкой, будет уделено соответствующее внимание.

Моя версия была:

// Fixes anchor focus in Chrome/Safari/IE by setting the tabindex of the 
// target container to -1 on click/enter
// see -> /3601296/ssylka-propustit-navigatsiy-ne-rabotaet-v-google-chrome

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

Я понял. Цель должна быть тегом, который может быть сфокусирован, например ссылка, если нет, то в моем случае 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 5

В 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 6

Вот то же решение без jQuery.

Добавить якорь страницы:

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

Ссылка на контент:

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

Мой jsfiddle

Answer 7

Вот мой обходной путь.Это позволяет клавиатуре пропустить навигационную ссылку на любой идентификатор элемента на его странице.

<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. Даже если я удаляю атрибут href из ссылки a сфокус, браузеры все еще будут помнить положение фокуса для навигации с помощью клавиатуры, но больше не будут отображать метку фокуса на экране.

Я написал это для всплывающей страницы, пропускающей навигацию, которая вряд липрокручиватьсяЯ надеюсь, что это будет работать даже для программ чтения с экрана.