「跳過導航」鏈接無法在谷歌瀏覽器工作

Question

我關注this page做出「跳過導航」鏈接，但它不適用於Chrome（5.0.375.127）。

當我標籤並輸入鏈接時，它會滾動到內容，但當我繼續選項卡時，它從頂部開始，但不是從內容開始。

該頁面的跳過「跳過導航」鏈接在Chrome中也不起作用。

這是Chrome的錯誤嗎？任何解決方法？

Answer 1

我明白了。目標應該是一個可以聚焦的標籤，如果沒有，就是我的情況，應該將target的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 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

我可以證實，安迪李的回答工作，但我並不需要的東西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

我相信這是最正確的按Knu在回答這個屬性chrome bug #37221到Skip links not working in Chrome。

我不同意Javascript解決方法適用於長期。

Answer 5

這是我的解決方法。 它使鍵盤跳過導航鏈接到其頁面上的任何元素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. 只有a鏈接href屬性可能是鍵盤導航錨鏈接的正確目的地。
2. 即使我從重點a鏈接刪除href屬性，瀏覽器仍然會記住鍵盤導航的焦點位置，同時它不會顯示在屏幕上，聚焦標記了。

我寫它爲彈出頁面跳過導航不可能被滾動。 我希望它甚至可以用於屏幕閱讀器。

Answer 6

我知道這是一個古老的問題，但我終於在搜索了幾個小時後偶然發現了它。我還沒有找到一個非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 7

這裏是沒有jQuery的同樣的解決方案。

添加頁面的錨：

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

鏈接到內容：

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

我jsfiddle